/* ─────────────────────────────────────────────
           RESET & VARIABLES
        ───────────────────────────────────────────── */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
          /* Udyog Sovereign System Palette */
          --surface: #f8f9ff;
          --surface-dim: #cbdbf5;
          --surface-bright: #f8f9ff;
          --surface-container-lowest: #ffffff;
          --surface-container-low: #eff4ff;
          --surface-container: #e5eeff;
          --surface-container-high: #dce9ff;
          --surface-container-highest: #d3e4fe;
          --on-surface: #0b1c30;
          --on-surface-variant: #46464e;
          --inverse-surface: #213145;
          --inverse-on-surface: #eaf1ff;
          --outline: #77767f;
          --outline-variant: #c7c5cf;
          --surface-tint: #565c84;
          --primary: #000000;
          --on-primary: #ffffff;
          --primary-container: #13183d;
          --on-primary-container: #7c81ac;
          --inverse-primary: #bfc3f2;
          --secondary: #735c00;
          --on-secondary: #ffffff;
          --secondary-container: #fed65b;
          --on-secondary-container: #745c00;
          --tertiary: #000000;
          --on-tertiary: #ffffff;
          --tertiary-container: #002110;
          --on-tertiary-container: #459366;
          --error: #ba1a1a;
          --on-error: #ffffff;
          --error-container: #ffdad6;
          --on-error-container: #93000a;
          --background: #f8f9ff;
          --on-background: #0b1c30;
          --surface-variant: #d3e4fe;

          /* Core legacy palette mapping to Sovereign */
          --navy:        #050A30;
          --navy-mid:    #1F2546;
          --navy-soft:   #3A3F62;
          --navy-muted:  #4A4F6E;
          --gold:        #D4AF37;
          --gold-soft:   rgba(212,175,55,.12);
          --gold-glow:   rgba(212,175,55,.25);
          --green:       #2E7D52;
          --green-lt:    #EBF5F0;
          --danger:      #C0392B;
          --wa-green:    #25D366;

          /* Surfaces */
          --bg:          var(--background);
          --bg-2:        var(--surface-container-low);
          --surface-old: #FFFFFF;
          --surface-2:   var(--surface-container);
          --surface-3:   var(--surface-container-high);

          /* Borders */
          --border:      rgba(5,10,48,.08);
          --border-md:   rgba(5,10,48,.15);
          --border-strong: rgba(5,10,48,.22);

          /* Shadows */
          --s-xs:  0 1px 3px rgba(5,10,48,.05);
          --s-sm:  0 3px 12px rgba(5,10,48,.07);
          --s-md:  0 8px 28px rgba(5,10,48,.09);
          --s-lg:  0 18px 48px rgba(5,10,48,.13);
          --s-xl:  0 28px 60px rgba(5,10,48,.18);
          --s-card: 0 18px 40px -12px rgba(5,10,48,.18);

          /* Radius */
          --r-xs:   6px;
          --r-sm:   10px;
          --r-md:   18px;
          --r-lg:   28px;
          --r-xl:   36px;
          --r-2xl:  48px;
          --r-pill: 9999px;

          /* Typography */
          --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-mono: "JetBrains Mono", monospace;
        }

        html { scroll-behavior: smooth; }

        body {
          font-family: var(--font);
          background: linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
          color: var(--navy);
          line-height: 1.6;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          overflow-x: hidden;
          min-height: 100vh;
        }

        /* ─────────────────────────────────────────────
           NOISE TEXTURE OVERLAY (subtle depth)
        ───────────────────────────────────────────── */
        body::before {
          content: '';
          position: fixed;
          inset: 0;
          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
          pointer-events: none;
          z-index: 0;
          opacity: .4;
        }

        /* ─────────────────────────────────────────────
           AMBIENT BLOBS
        ───────────────────────────────────────────── */
        .blob {
          position: fixed;
          border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
          pointer-events: none;
          z-index: -1;
          will-change: transform;
        }
        .blob-1 {
          width: 700px; height: 600px;
          top: -200px; left: -200px;
          background: radial-gradient(ellipse, rgba(212,175,55,.06) 0%, transparent 70%);
          animation: blobDrift1 18s ease-in-out infinite;
        }
        .blob-2 {
          width: 600px; height: 500px;
          bottom: 0; right: -150px;
          background: radial-gradient(ellipse, rgba(5,10,48,.04) 0%, transparent 70%);
          animation: blobDrift2 22s ease-in-out infinite;
        }
        @keyframes blobDrift1 {
          0%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
          33%      { transform: translate(40px,30px) rotate(8deg) scale(1.05); }
          66%      { transform: translate(-20px,50px) rotate(-5deg) scale(.96); }
        }
        @keyframes blobDrift2 {
          0%,100% { transform: translate(0,0) rotate(0deg); }
          50%      { transform: translate(-30px,-40px) rotate(10deg); }
        }

        /* ─────────────────────────────────────────────
           LAYOUT WRAPPER
        ───────────────────────────────────────────── */
        .wrap {
          max-width: 1440px;
          margin: 0 auto;
          padding: 0 2rem;
          position: relative;
          z-index: 1;
        }

        /* ─────────────────────────────────────────────
           NAVIGATION
        ───────────────────────────────────────────── */
        .nav-wrapper {
          position: sticky;
          top: 0;
          z-index: 100;
          padding: 0.5rem 2rem;
          max-width: 1440px;
          margin: 0 auto;
        }

        .nav {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: rgba(255,255,255,.82);
          backdrop-filter: blur(16px) saturate(180%);
          -webkit-backdrop-filter: blur(16px) saturate(180%);
          border: 1px solid rgba(255,255,255,.9);
          border-radius: var(--r-pill);
          padding: 0.55rem 0.7rem 0.55rem 1.3rem;
          box-shadow: 0 4px 24px rgba(5,10,48,.06), 0 1px 0 rgba(255,255,255,.8) inset;
          transition: box-shadow .3s ease;
        }
        .nav.scrolled {
          box-shadow: 0 8px 32px rgba(5,10,48,.11), 0 1px 0 rgba(255,255,255,.8) inset;
        }

        .brand {
          text-decoration: none;
          display: inline-flex;
          align-items: center;
          gap: 10px;
        }
        .brand-logo {
          width: 38px; height: 38px;
          object-fit: contain;
          border-radius: 8px;
        }
        .brand-name {
          font-size: 1.2rem;
          font-weight: 800;
          color: var(--navy);
          letter-spacing: -0.03em;
        }

        .nav-links {
          display: flex;
          align-items: center;
          gap: 2rem;
        }
        .nav-link {
          text-decoration: none;
          color: var(--navy-soft);
          font-size: 0.9rem;
          font-weight: 500;
          letter-spacing: -0.01em;
          transition: color .15s;
        }
        .nav-link:hover { color: var(--navy); }

        .nav-actions { display: flex; gap: .6rem; align-items: center; }

        .btn-nav-ghost {
          text-decoration: none;
          color: var(--navy);
          font-size: .88rem;
          font-weight: 600;
          padding: .42rem .9rem;
          border-radius: var(--r-pill);
          border: 1.5px solid var(--border-md);
          transition: border-color .15s, background .15s;
        }
        .btn-nav-ghost:hover { border-color: var(--navy); background: rgba(5,10,48,.03); }

        .btn-nav-primary {
          text-decoration: none;
          color: #fff;
          font-size: .88rem;
          font-weight: 700;
          padding: .48rem 1.2rem;
          border-radius: var(--r-pill);
          background: linear-gradient(135deg, var(--navy), var(--navy-mid));
          box-shadow: 0 4px 12px rgba(5,10,48,.18);
          transition: transform .15s, box-shadow .15s;
          letter-spacing: -0.01em;
        }
        .btn-nav-primary:hover {
          transform: translateY(-1px);
          box-shadow: 0 8px 20px rgba(5,10,48,.25);
        }

        /* Mobile hamburger */
        .ham {
          display: none;
          background: none;
          border: none;
          cursor: pointer;
          color: var(--navy);
          font-size: 1.1rem;
          padding: 8px;
          border-radius: 8px;
        }
        .ham:hover { background: var(--surface-3); }

        .mob-menu {
          display: none;
          flex-direction: column;
          background: rgba(255,255,255,.96);
          backdrop-filter: blur(12px);
          border: 1px solid var(--border-md);
          border-radius: var(--r-md);
          margin-top: .5rem;
          padding: 1rem 1.2rem 1.2rem;
          box-shadow: var(--s-lg);
          gap: 2px;
        }
        .mob-menu.open { display: flex; }

        .mob-link {
          text-decoration: none;
          color: var(--navy-soft);
          font-weight: 500;
          font-size: .95rem;
          padding: .62rem .5rem;
          border-bottom: 1px solid var(--border);
        }
        .mob-link:last-of-type { border-bottom: none; }

        .mob-actions {
          display: flex;
          gap: .5rem;
          margin-top: .8rem;
        }
        .mob-actions a {
          flex: 1;
          text-align: center;
          padding: .65rem;
          border-radius: var(--r-pill);
          text-decoration: none;
          font-weight: 600;
          font-size: .9rem;
        }
        .mob-ghost { background: transparent; border: 1.5px solid var(--border-strong); color: var(--navy); }
        .mob-solid { background: var(--navy); color: white; }

        /* ─────────────────────────────────────────────
           HERO SECTION
        ───────────────────────────────────────────── */
        .hero {
          padding: 0 0 3rem;
        }
        .hero-inner {
          display: grid;
          grid-template-columns: minmax(0, 0.95fr) minmax(640px, 1.2fr);
          gap: 2.5rem;
          align-items: center;
        }

        .hero-left { animation: heroFadeUp .9s cubic-bezier(.22,1,.36,1) both; }

        @keyframes heroFadeUp {
          from { opacity: 0; transform: translateY(24px); }
          to   { opacity: 1; transform: translateY(0); }
        }

        /* Pill label */
        .hero-pill {
          display: inline-flex;
          align-items: center;
          gap: .45rem;
          background: rgba(212,175,55,.08);
          border: 1px solid rgba(212,175,55,.3);
          border-radius: var(--r-pill);
          padding: .38rem 1rem;
          font-size: .78rem;
          font-weight: 700;
          color: #9a7c1c;
          letter-spacing: .04em;
          text-transform: uppercase;
          margin-bottom: 1.4rem;
        }
        .hero-pill i { color: var(--gold); font-size: .75rem; }

        /* Hero heading */
        .hero-h1 {
          font-size: clamp(2.8rem, 4vw, 4.4rem);
          font-weight: 900;
          line-height: 1.08;
          letter-spacing: -0.04em;
          color: var(--navy);
          margin-bottom: .5rem;
        }
        .hero-h1 .accent {
          background: linear-gradient(135deg, var(--navy) 30%, var(--navy-soft));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .hero-sub {
          font-size: 1.15rem;
          font-weight: 500;
          color: var(--navy-soft);
          letter-spacing: -0.02em;
          margin-bottom: .7rem;
        }

        .hero-desc {
          font-size: 1.02rem;
          font-weight: 400;
          color: var(--navy-muted);
          line-height: 1.7;
          max-width: 92%;
          margin-bottom: 1.8rem;
        }

        /* Benefit checklist */
        .benefits {
          display: flex;
          flex-wrap: wrap;
          gap: .6rem 1.6rem;
          margin-bottom: 2rem;
        }
        .benefit {
          display: flex;
          align-items: center;
          gap: .45rem;
          font-size: .9rem;
          font-weight: 500;
          color: var(--navy-soft);
        }
        .benefit i { color: var(--green); font-size: .85rem; }

        /* CTA Buttons */
        .hero-actions {
          display: flex;
          gap: .9rem;
          flex-wrap: wrap;
          margin-bottom: 2.5rem;
        }

        .btn-primary {
          display: inline-flex;
          align-items: center;
          gap: .55rem;
          background: linear-gradient(135deg, #050A30 0%, #1F2546 100%);
          color: white;
          text-decoration: none;
          font-size: .98rem;
          font-weight: 700;
          padding: .88rem 1.9rem;
          border-radius: var(--r-pill);
          box-shadow: 0 8px 24px rgba(5,10,48,.22), 0 2px 4px rgba(5,10,48,.12);
          transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
          letter-spacing: -0.01em;
          border: none;
          cursor: pointer;
        }
        .btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 14px 36px rgba(5,10,48,.28);
        }
        .btn-primary i { font-size: 1rem; }

        .btn-secondary {
          display: inline-flex;
          align-items: center;
          gap: .5rem;
          background: rgba(255,255,255,.85);
          backdrop-filter: blur(8px);
          color: var(--navy);
          text-decoration: none;
          font-size: .96rem;
          font-weight: 600;
          padding: .88rem 1.7rem;
          border-radius: var(--r-pill);
          border: 1.5px solid var(--border-strong);
          transition: border-color .15s, background .15s, transform .2s;
          letter-spacing: -0.01em;
        }
        .btn-secondary:hover {
          border-color: var(--navy);
          background: white;
          transform: translateY(-1px);
        }

        /* Trust stats row */
        .stats-row {
          display: flex;
          gap: 2.5rem;
          padding-top: 2rem;
          border-top: 1px solid var(--border);
        }
        .stat-item {}
        .stat-num {
          font-size: 2rem;
          font-weight: 900;
          letter-spacing: -0.04em;
          color: var(--navy);
          line-height: 1.1;
        }
        .stat-lbl {
          font-size: .82rem;
          font-weight: 500;
          color: var(--navy-muted);
          margin-top: .1rem;
        }

        /* ─────────────────────────────────────────────
           HERO VISUAL — APP MOCKUP
        ───────────────────────────────────────────── */
        .hero-vis {
          position: relative;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          animation: heroFadeUp .9s cubic-bezier(.22,1,.36,1) .15s both;
        }

        .mockup-wrap {
          position: relative;
          width: 100%;
          max-width: 760px;
        }

        /* Floating label */
        .float-badge {
          position: absolute;
          top: -14px; left: -18px;
          z-index: 4;
          background: white;
          border: 1px solid var(--border-md);
          border-radius: var(--r-sm);
          padding: .5rem .85rem;
          box-shadow: var(--s-md);
          display: flex;
          align-items: center;
          gap: .45rem;
          font-size: .75rem;
          font-weight: 700;
          color: var(--navy);
          white-space: nowrap;
          animation: floatBadge 4s ease-in-out infinite;
        }
        .float-dot {
          width: 8px; height: 8px;
          border-radius: 50%;
          background: var(--green);
          box-shadow: 0 0 0 3px rgba(46,125,82,.2);
          animation: pulse 2s ease infinite;
        }
        @keyframes floatBadge {
          0%,100% { transform: translateY(0); }
          50%      { transform: translateY(-8px); }
        }
        @keyframes pulse {
          0%,100% { box-shadow: 0 0 0 3px rgba(46,125,82,.2); }
          50%      { box-shadow: 0 0 0 6px rgba(46,125,82,.1); }
        }

        /* WhatsApp floating badge */
        .wa-badge {
          position: absolute;
          bottom: -14px; right: -14px;
          z-index: 4;
          background: white;
          border: 1px solid var(--border-md);
          border-radius: var(--r-sm);
          padding: .6rem .9rem;
          box-shadow: var(--s-md);
          animation: floatBadge 4s ease-in-out .8s infinite;
          min-width: 160px;
        }
        .wa-top {
          display: flex;
          align-items: center;
          gap: .4rem;
          margin-bottom: .3rem;
        }
        .wa-icon {
          width: 20px; height: 20px;
          background: var(--wa-green);
          border-radius: 6px;
          display: flex; align-items: center; justify-content: center;
          color: white; font-size: .7rem;
        }
        .wa-title { font-size: .72rem; font-weight: 700; color: var(--navy); }
        .wa-msg {
          font-size: .66rem;
          color: var(--green);
          background: #f0fdf4;
          padding: .2rem .4rem;
          border-radius: 4px;
          margin-bottom: .2rem;
          font-weight: 600;
        }
        .wa-sub { font-size: .62rem; color: var(--navy-muted); }

        /* Browser mockup frame */
        .mock-browser {
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 40px 80px rgba(5,10,48,.16), 0 8px 20px rgba(5,10,48,.08);
          border: 1px solid rgba(5,10,48,.06);
          width: 100%;
        }

        .mock-titlebar {
          background: var(--surface-3);
          padding: .55rem 1rem;
          display: flex;
          align-items: center;
          gap: .45rem;
          border-bottom: 1px solid var(--border);
        }
        .mock-dot { width: 9px; height: 9px; border-radius: 50%; }
        .md-r { background: #FF5F57; }
        .md-y { background: #FFBD2E; }
        .md-g { background: #28C940; }
        .mock-url-bar {
          margin-left: .8rem;
          flex: 1;
          background: white;
          border: 1px solid var(--border);
          border-radius: 6px;
          padding: .18rem .65rem;
          font-size: .68rem;
          color: var(--navy-muted);
          font-family: var(--font);
        }

        .mock-img-container {
          background: var(--surface-2);
          aspect-ratio: 16 / 9;
        }
        .mock-img-container img,
        .mock-img-container video {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        /* ─────────────────────────────────────────────
           FEATURE STRIP
        ───────────────────────────────────────────── */
        .feat-strip {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
          background: white;
          border: 1px solid var(--border-md);
          border-radius: var(--r-lg);
          box-shadow: var(--s-sm);
          margin: 3rem 0;
          overflow: hidden;
        }

        .strip-item {
          display: flex;
          align-items: center;
          gap: .85rem;
          padding: 1.4rem 1.6rem;
          transition: background .15s;
        }
        .strip-item:hover { background: var(--surface-2); }
        .strip-item + .strip-item { border-left: 1px solid var(--border); }

        .strip-icon {
          width: 44px; height: 44px; flex-shrink: 0;
          border-radius: 12px;
          display: flex; align-items: center; justify-content: center;
          font-size: 1.1rem;
        }
        .si-navy  { background: rgba(5,10,48,.06); color: var(--navy); }
        .si-gold  { background: rgba(212,175,55,.1); color: #9a7c1c; }
        .si-green { background: var(--green-lt); color: var(--green); }
        .si-purple{ background: rgba(99,78,180,.08); color: #634EB4; }

        .strip-text h5 { font-size: .9rem; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
        .strip-text p  { font-size: .77rem; color: var(--navy-muted); margin-top: .1rem; }

        /* ─────────────────────────────────────────────
           STATS BAR
        ───────────────────────────────────────────── */
        .stats-bar {
          background: var(--navy);
          border-radius: var(--r-xl);
          padding: 2rem 2.5rem;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1.5rem;
          margin: 0 0 3rem;
          position: relative;
          overflow: hidden;
        }
        .stats-bar::before {
          content: '';
          position: absolute; inset: 0;
          background:
            radial-gradient(ellipse 55% 140% at 92% 50%, rgba(212,175,55,.12) 0%, transparent 60%),
            radial-gradient(ellipse 35% 80% at 8% 50%, rgba(212,175,55,.06) 0%, transparent 60%);
          pointer-events: none;
        }

        .sb-item { text-align: center; position: relative; z-index: 1; }
        .sb-item + .sb-item { border-left: 1px solid rgba(255,255,255,.1); }
        .sb-num {
          font-size: 2.2rem; font-weight: 900;
          letter-spacing: -0.05em;
          color: white; line-height: 1.1;
        }
        .sb-num em { color: var(--gold); font-style: normal; }
        .sb-lbl { font-size: .78rem; color: rgba(255,255,255,.5); margin-top: .2rem; }

        /* ─────────────────────────────────────────────
           SECTION SCAFFOLD
        ───────────────────────────────────────────── */
        .section {
          margin: 3rem 0;
          padding: 2.5rem 2rem;
          background: var(--surface);
          border: 1px solid var(--border-md);
          border-radius: var(--r-lg);
          box-shadow: var(--s-card);
          position: relative;
          overflow: hidden;
        }
        /* Subtle top gradient accent */
        .section::before {
          content: '';
          position: absolute; top: 0; left: 0; right: 0; height: 1px;
          background: linear-gradient(90deg, transparent, rgba(5,10,48,.12), transparent);
        }

        .section-head {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 2.5rem;
          gap: 1rem;
        }
        .section-head-left {}
        .section-eyebrow {
          font-size: .72rem;
          font-weight: 700;
          letter-spacing: .08em;
          text-transform: uppercase;
          color: var(--navy-muted);
          margin-bottom: .5rem;
          display: flex;
          align-items: center;
          gap: .4rem;
        }
        .section-eyebrow::before {
          content: '';
          width: 14px; height: 2px;
          background: var(--gold);
          border-radius: 2px;
          flex-shrink: 0;
        }
        .section-h2 {
          font-size: clamp(1.7rem, 2.5vw, 2.2rem);
          font-weight: 800;
          color: var(--navy);
          letter-spacing: -0.03em;
          line-height: 1.18;
        }
        .section-desc {
          font-size: .97rem;
          color: var(--navy-muted);
          line-height: 1.7;
          margin-top: .5rem;
          max-width: 500px;
        }

        .badge-tag {
          display: inline-flex;
          align-items: center;
          gap: .35rem;
          background: var(--navy);
          color: rgba(255,255,255,.85);
          padding: .35rem 1rem;
          border-radius: var(--r-pill);
          font-size: .72rem;
          font-weight: 700;
          letter-spacing: .05em;
          text-transform: uppercase;
          white-space: nowrap;
          flex-shrink: 0;
        }

        /* ─────────────────────────────────────────────
           FEATURE GRID — TILES
        ───────────────────────────────────────────── */
        .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; }
        .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; }
        .grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.1rem; }

        .tile {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: var(--r-md);
          padding: 1.6rem 1.4rem;
          transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .15s;
          position: relative;
          overflow: hidden;
        }
        .tile::before {
          content: '';
          position: absolute; top: 0; left: 0; right: 0; height: 2px;
          background: linear-gradient(90deg, transparent, var(--gold), transparent);
          opacity: 0;
          transition: opacity .2s;
        }
        .tile:hover { transform: translateY(-5px); box-shadow: var(--s-xl); border-color: var(--border-md); }
        .tile:hover::before { opacity: 1; }

        .tile-icon {
          width: 44px; height: 44px;
          border-radius: 12px;
          display: flex; align-items: center; justify-content: center;
          font-size: 1.1rem;
          margin-bottom: 1rem;
          background: rgba(5,10,48,.05);
          color: var(--navy);
        }

        .tile h4 {
          font-size: 1rem;
          font-weight: 700;
          color: var(--navy);
          letter-spacing: -0.02em;
          margin-bottom: .35rem;
        }
        .tile p {
          font-size: .88rem;
          color: var(--navy-muted);
          line-height: 1.6;
        }
        .tile ul { list-style: none; margin-top: .5rem; }
        .tile li {
          font-size: .86rem;
          color: var(--navy-soft);
          padding: .15rem 0;
          display: flex;
          align-items: flex-start;
          gap: .3rem;
        }

        /* ─────────────────────────────────────────────
           COMPARISON TABLE
        ───────────────────────────────────────────── */
        .cmp-wrap {
          background: white;
          border: 1px solid var(--border-md);
          border-radius: var(--r-md);
          overflow: hidden;
          box-shadow: var(--s-md);
        }

        .cmp-head { display: grid; grid-template-columns: 1.9fr 1fr 1fr; }

        .cmp-hcell {
          padding: 1.1rem 1.5rem;
          font-size: .82rem;
          font-weight: 600;
          color: var(--navy-muted);
          background: var(--surface-3);
          border-bottom: 2px solid var(--border-md);
          text-align: center;
        }
        .cmp-hcell:first-child { text-align: left; }
        .cmp-hcell.ub-col {
          background: var(--navy);
          color: white;
          display: flex; align-items: center; justify-content: center; gap: .5rem;
          border-bottom-color: rgba(255,255,255,.1);
        }
        .ub-logo-wrap {
          width: 22px; height: 22px;
          background: white;
          border-radius: 6px;
          display: flex; align-items: center; justify-content: center;
          overflow: hidden;
        }
        .ub-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }

        .cmp-row { display: grid; grid-template-columns: 1.9fr 1fr 1fr; border-bottom: 1px solid var(--border); transition: background .12s; }
        .cmp-row:last-child { border-bottom: none; }
        .cmp-row:hover { background: var(--surface-2); }

        .cmp-cell {
          padding: .95rem 1.5rem;
          font-size: .9rem;
          color: var(--navy-soft);
          display: flex; align-items: center;
          border-right: 1px solid var(--border);
        }
        .cmp-cell:last-child { border-right: none; }
        .cmp-cell.center { justify-content: center; }
        .cmp-cell.ub-data { background: rgba(5,10,48,.015); }
        .cmp-cell.lbl { font-weight: 500; color: var(--navy-soft); }

        .check-ok { color: var(--green); font-size: 1.1rem; }
        .check-no { color: var(--danger); font-size: .85rem; }
        .lim-text { font-size: .8rem; color: var(--navy-muted); font-style: italic; }
        .price-accent { color: var(--gold); font-weight: 800; font-size: 1.05rem; }

        .cmp-footer {
          padding: 1rem 1.5rem;
          background: var(--surface-3);
          border-top: 1px solid var(--border);
          text-align: center;
          font-size: .85rem;
          color: var(--navy-muted);
        }
        .cmp-footer strong { color: var(--navy); }

        /* ─────────────────────────────────────────────
           PRICING CARDS
        ───────────────────────────────────────────── */
        .pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.3rem; align-items: start; }

        .pc {
          background: white;
          border: 1.5px solid var(--border-md);
          border-radius: var(--r-lg);
          padding: 1.9rem 1.6rem;
          box-shadow: var(--s-sm);
          transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
          position: relative;
          overflow: hidden;
          text-align: center;
        }
        .pc:hover { transform: translateY(-5px); box-shadow: var(--s-xl); }

        .pc.pop {
          border-color: var(--navy);
          box-shadow: var(--s-lg);
          transform: scale(1.03);
        }
        .pc.pop:hover { transform: scale(1.03) translateY(-4px); box-shadow: var(--s-xl); }
        .pc.pop::after {
          content: '';
          position: absolute; top: 0; left: 0; right: 0; height: 4px;
          background: linear-gradient(90deg, var(--navy), var(--gold));
        }

        .pop-badge {
          position: absolute;
          top: 14px; right: 14px;
          background: var(--green);
          color: white;
          font-size: .68rem;
          font-weight: 700;
          padding: .22rem .75rem;
          border-radius: var(--r-pill);
          box-shadow: 0 3px 10px rgba(46,125,82,.3);
          letter-spacing: .04em;
        }

        .plan-dur {
          font-size: .73rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: .1em;
          color: var(--navy-muted);
          margin-bottom: .6rem;
        }
        .plan-price {
          font-size: 3rem;
          font-weight: 900;
          letter-spacing: -0.06em;
          color: var(--navy);
          line-height: 1;
          margin-bottom: .3rem;
        }
        .plan-price sup { font-size: 1.3rem; vertical-align: super; font-weight: 700; }

        .plan-sub { font-size: .78rem; color: var(--navy-muted); margin-bottom: .5rem; }

        .plan-save-badge {
          display: inline-block;
          background: rgba(212,175,55,.1);
          color: #8a6b10;
          border: 1px solid rgba(212,175,55,.3);
          font-size: .72rem;
          font-weight: 700;
          padding: .18rem .7rem;
          border-radius: var(--r-pill);
          margin-bottom: 1.4rem;
        }

        .plan-divider { height: 1px; background: var(--border); margin: 0 0 1.3rem; }

        .plan-feats { list-style: none; text-align: left; margin-bottom: 1.6rem; }
        .plan-feats li {
          display: flex; align-items: flex-start; gap: .5rem;
          font-size: .88rem;
          color: var(--navy-soft);
          padding: .3rem 0;
        }
        .plan-feats li i { color: var(--green); font-size: .78rem; flex-shrink: 0; margin-top: .18rem; }
        .plan-feats li strong { color: var(--navy); }

        .btn-plan {
          display: block;
          width: 100%;
          padding: .8rem;
          border-radius: var(--r-sm);
          font-family: var(--font);
          font-weight: 700;
          font-size: .92rem;
          text-align: center;
          text-decoration: none;
          cursor: pointer;
          border: none;
          transition: transform .15s, box-shadow .15s, opacity .15s;
        }
        .btn-plan:hover { transform: translateY(-1px); }

        .bp-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--border-strong); }
        .bp-outline:hover { border-color: var(--navy); background: rgba(5,10,48,.03); }

        .bp-gold {
          background: linear-gradient(135deg, #C6A15B, #D4AF37);
          color: white;
          box-shadow: 0 5px 18px rgba(198,161,91,.35);
        }
        .bp-gold:hover { box-shadow: 0 8px 24px rgba(198,161,91,.45); }

        .bp-navy {
          background: linear-gradient(135deg, var(--navy), var(--navy-mid));
          color: white;
          box-shadow: 0 5px 18px rgba(5,10,48,.28);
        }
        .bp-navy:hover { box-shadow: 0 8px 28px rgba(5,10,48,.38); }

        .pricing-note {
          text-align: center;
          margin-top: 1.4rem;
          font-size: .85rem;
          color: var(--navy-muted);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: .8rem;
          flex-wrap: wrap;
        }
        .pricing-note i { color: var(--green); }
        .pricing-note .sep { color: var(--border-md); }

        /* ─────────────────────────────────────────────
           WHY SWITCH — IMPACT CARDS
        ───────────────────────────────────────────── */
        .impact-tile {
          border-radius: var(--r-md);
          padding: 1.8rem 1.6rem;
          border: 1px solid var(--border);
          transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
          position: relative;
          overflow: hidden;
          background: white;
        }
        .impact-tile:hover { transform: translateY(-5px); box-shadow: var(--s-xl); }

        .impact-emoji { font-size: 1.8rem; margin-bottom: .7rem; display: block; }
        .impact-tile h4 {
          font-size: 1.1rem;
          font-weight: 800;
          color: var(--navy);
          letter-spacing: -0.03em;
          margin-bottom: .4rem;
        }
        .impact-tile p { font-size: .9rem; color: var(--navy-muted); line-height: 1.65; }

        /* ─────────────────────────────────────────────
           LANGUAGE SECTION
        ───────────────────────────────────────────── */
        .lang-tile {
          border-radius: var(--r-md);
          padding: 1.8rem 1.6rem;
          border: 1px solid var(--border);
          background: white;
          transition: transform .2s, box-shadow .2s;
        }
        .lang-tile:hover { transform: translateY(-4px); box-shadow: var(--s-lg); }
        .lang-tile h4 {
          font-size: 1.3rem;
          font-weight: 800;
          color: var(--navy);
          letter-spacing: -0.03em;
          margin-bottom: .5rem;
        }
        .lang-tile p {
          font-size: .92rem;
          color: var(--navy-muted);
          line-height: 1.65;
          margin-bottom: .8rem;
        }
        .lang-tile ul { list-style: none; }
        .lang-tile li {
          font-size: .88rem;
          color: var(--navy-soft);
          padding: .2rem 0;
        }

        /* ─────────────────────────────────────────────
           CTA SECTION
        ───────────────────────────────────────────── */
        .cta-section {
          background: var(--navy);
          border-radius: var(--r-2xl);
          padding: 4rem 3rem;
          text-align: center;
          position: relative;
          overflow: hidden;
          margin: 3rem 0;
        }
        .cta-section::before {
          content: '';
          position: absolute; inset: 0;
          background:
            radial-gradient(ellipse 60% 70% at 10% 50%, rgba(212,175,55,.15) 0%, transparent 60%),
            radial-gradient(ellipse 40% 60% at 90% 20%, rgba(212,175,55,.08) 0%, transparent 60%),
            radial-gradient(ellipse 30% 50% at 80% 80%, rgba(46,125,82,.06) 0%, transparent 60%);
          pointer-events: none;
        }
        .cta-section > * { position: relative; z-index: 1; }

        .cta-section h2 {
          font-size: clamp(1.9rem, 3vw, 2.8rem);
          font-weight: 900;
          color: white;
          letter-spacing: -0.04em;
          line-height: 1.1;
          margin-bottom: .7rem;
        }
        .cta-section p {
          font-size: 1rem;
          color: rgba(255,255,255,.55);
          line-height: 1.65;
          max-width: 440px;
          margin: 0 auto 2rem;
        }

        .cta-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }

        .btn-cta-primary {
          display: inline-flex; align-items: center; gap: .55rem;
          padding: .9rem 2rem;
          background: linear-gradient(135deg, #C6A15B, var(--gold));
          color: white;
          font-family: var(--font);
          font-weight: 700;
          font-size: .98rem;
          border-radius: var(--r-pill);
          text-decoration: none;
          box-shadow: 0 6px 20px rgba(212,175,55,.35);
          transition: transform .2s, box-shadow .2s;
          letter-spacing: -0.01em;
        }
        .btn-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(212,175,55,.45); }

        .btn-cta-ghost {
          display: inline-flex; align-items: center; gap: .5rem;
          padding: .9rem 1.8rem;
          background: rgba(255,255,255,.08);
          color: rgba(255,255,255,.85);
          font-family: var(--font);
          font-weight: 600;
          font-size: .96rem;
          border-radius: var(--r-pill);
          text-decoration: none;
          border: 1.5px solid rgba(255,255,255,.18);
          transition: background .15s, border-color .15s;
        }
        .btn-cta-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }

        .cta-checks {
          display: flex;
          justify-content: center;
          gap: 1.8rem;
          flex-wrap: wrap;
        }
        .cta-check {
          display: flex; align-items: center; gap: .35rem;
          font-size: .8rem;
          color: rgba(255,255,255,.4);
        }
        .cta-check i { color: rgba(255,255,255,.25); font-size: .72rem; }

        /* ─────────────────────────────────────────────
           FOOTER
        ───────────────────────────────────────────── */
        /* ─────────────────────────────────────────────
           PREMIUM FOOTER
        ───────────────────────────────────────────── */
        .footer-premium {
          padding: 4rem 0 1.5rem;
          margin-top: 2rem;
          border-top: 1px solid var(--border-md);
          background: linear-gradient(180deg, var(--surface) 0%, #ebf1fa 100%);
          border-radius: var(--r-xl) var(--r-xl) 0 0;
        }
        .fp-top {
          display: grid;
          grid-template-columns: 350px 1fr;
          gap: 4rem;
          margin-bottom: 4rem;
        }
        .fp-brand .brand { margin-bottom: 1rem; }
        .fp-desc {
          font-size: .95rem;
          color: var(--navy-muted);
          line-height: 1.6;
          margin-bottom: 1.5rem;
        }
        .fp-contact-title {
          font-size: .75rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: .08em;
          color: var(--navy-soft);
          margin-bottom: .4rem;
        }
        .fp-email {
          display: inline-flex; align-items: center; gap: .5rem;
          font-size: 1.05rem;
          font-weight: 600;
          color: var(--navy);
          text-decoration: none;
          transition: color .2s;
        }
        .fp-email:hover { color: var(--gold); }
        .fp-email i { color: var(--gold); font-size: 1.2rem; }

        .fp-links {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 2rem;
        }
        .fp-col h4 {
          font-size: .95rem;
          font-weight: 700;
          color: var(--navy);
          margin-bottom: 1.2rem;
          letter-spacing: -0.01em;
        }
        .fp-col a {
          display: block;
          font-size: .88rem;
          font-weight: 500;
          color: var(--navy-muted);
          text-decoration: none;
          margin-bottom: .8rem;
          transition: color .2s, transform .2s;
        }
        .fp-col a:hover {
          color: var(--navy);
          transform: translateX(4px);
        }

        .fp-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 1.5rem;
          border-top: 1px solid var(--border-md);
          font-size: .85rem;
          color: var(--navy-muted);
        }
        .fp-credit a {
          color: var(--navy);
          font-weight: 600;
          text-decoration: none;
        }
        .fp-credit a:hover { text-decoration: underline; }

        /* ─────────────────────────────────────────────
           SCROLL REVEAL
        ───────────────────────────────────────────── */
        .reveal {
          opacity: 0;
          transform: translateY(22px);
          transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
        }
        .reveal.vis { opacity: 1; transform: translateY(0); }
        .rd1 { transition-delay: .08s; }
        .rd2 { transition-delay: .16s; }
        .rd3 { transition-delay: .24s; }
        .rd4 { transition-delay: .32s; }

        /* ─────────────────────────────────────────────
           TESTIMONIALS
        ───────────────────────────────────────────── */
        .testimonial-card {
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.9);
            border-radius: var(--r-lg);
            padding: 2.2rem;
            box-shadow: var(--s-sm);
            transition: all .25s ease;
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
        }
        .testimonial-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--s-md);
            background: #fff;
        }
        .rating { color: var(--gold); font-size: 1.1rem; }
        .testimonial-text {
            font-size: 1.05rem;
            color: var(--navy-muted);
            line-height: 1.6;
            font-style: italic;
            flex-grow: 1;
        }
        .testimonial-author {
            margin-top: 1rem;
            border-top: 1px solid rgba(5,10,48,.08);
            padding-top: 1.2rem;
        }
        .testimonial-author strong { display: block; color: var(--navy); font-weight: 700; font-size: 1.1rem; }
        .testimonial-author span { color: var(--navy-soft); font-size: 0.9rem; }

        /* ─────────────────────────────────────────────
           FAQ
        ───────────────────────────────────────────── */
        .faq-container {
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .faq-item {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(5,10,48,.06);
            border-radius: var(--r-md);
            overflow: hidden;
            transition: all .2s;
        }
        .faq-item:hover { box-shadow: var(--s-sm); border-color: rgba(5,10,48,.12); }
        .faq-question {
            width: 100%;
            text-align: left;
            padding: 1.5rem 1.8rem;
            background: none;
            border: none;
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--navy);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .faq-icon {
            color: var(--gold);
            transition: transform .3s ease;
        }
        .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease;
            background: #fff;
        }
        .faq-question[aria-expanded="true"] + .faq-answer { max-height: 300px; }
        .faq-answer p {
            padding: 0 1.8rem 1.5rem;
            color: var(--navy-muted);
            line-height: 1.6;
            font-size: 1.05rem;
        }

        /* ─────────────────────────────────────────────
           RESPONSIVE — TABLET
        ───────────────────────────────────────────── */
        @media (max-width: 1024px) {
          .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
          .hero-vis { justify-content: center; }
          .mockup-wrap { max-width: 560px; }
          .grid-4 { grid-template-columns: repeat(2,1fr); }
          .grid-3 { grid-template-columns: repeat(2,1fr); }
          .pricing-grid { grid-template-columns: repeat(2,1fr); }
          .stats-bar { grid-template-columns: repeat(2,1fr); }
          .sb-item + .sb-item { border-left: none; }
          .feat-strip { grid-template-columns: repeat(2,1fr); }
          .strip-item + .strip-item { border-left: none; }
        }

        /* ─────────────────────────────────────────────
           RESPONSIVE — MOBILE
        ───────────────────────────────────────────── */
        @media (max-width: 768px) {
          .wrap { padding: 0 1rem; }
          .nav-wrapper { padding: .9rem 1rem; }

          .nav-links .nav-link { display: none; }
          .nav-actions .btn-nav-ghost { display: none; }
          .ham { display: block; }

          .hero { padding: 3rem 0 2rem; }
          .hero-desc { max-width: 100%; }

          .wa-badge { display: none; }

          .feat-strip { grid-template-columns: 1fr; border-radius: var(--r-md); }
          .strip-item + .strip-item { border-left: none; border-top: 1px solid var(--border); }

          .stats-bar { padding: 1.4rem 1.2rem; border-radius: var(--r-lg); }
          .sb-item + .sb-item { border-left: none; border-top: 1px solid rgba(255,255,255,.08); }

          .pricing-grid { grid-template-columns: 1fr; }
          .pc.pop { transform: none; }
          .pc.pop:hover { transform: translateY(-4px); }

          .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }

          .section { padding: 1.8rem 1.3rem; margin: 2rem 0; border-radius: var(--r-md); }
          .section-head { flex-direction: column; margin-bottom: 1.8rem; }

          .cta-section { padding: 2.8rem 1.5rem; border-radius: var(--r-xl); margin: 2rem 0; }
          .cta-btns { flex-direction: column; align-items: center; }
          .btn-cta-primary, .btn-cta-ghost { width: 100%; justify-content: center; }

          .stats-row { flex-wrap: wrap; gap: 1.2rem; }

          .cmp-head, .cmp-row { grid-template-columns: 1.4fr 1fr 1fr; }
          .cmp-cell { padding: .8rem .8rem; font-size: .82rem; }

          .footer { flex-direction: column; text-align: center; }
          .footer-links { justify-content: center; }
        }

        @media (max-width: 480px) {
          .hero-h1 { font-size: 2.3rem; }
          .hero-actions { flex-direction: column; }
          .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
          .stats-bar { grid-template-columns: repeat(2,1fr); }
          .cta-checks { gap: 1rem; }
        }

            #features,
            #pricing,
            #compare {
              scroll-margin-top: 120px;
            }

        .riya-widget {
          position: fixed;
          right: 18px;
          bottom: 18px;
          z-index: 1200;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 10px;
        }

        .riya-toggle {
          position: relative;
          width: 54px;
          height: 54px;
          border: none;
          border-radius: 16px;
          background: linear-gradient(135deg, #050A30, #1F2546);
          color: #fff;
          box-shadow: 0 14px 30px rgba(5,10,48,.22);
          cursor: pointer;
          font-size: 1rem;
        }

        .riya-toggle::before {
          content: '';
          position: absolute;
          inset: -6px;
          z-index: -1;
          border-radius: 20px;
          border: 2px solid rgba(212,175,55,.5);
          animation: riyaRingPulse 2.4s ease-out infinite;
          pointer-events: none;
        }

        @keyframes riyaRingPulse {
          0%   { transform: scale(0.9); opacity: 0.9; }
          80%  { transform: scale(1.4); opacity: 0; }
          100% { opacity: 0; }
        }

        .riya-panel {
          width: 320px;
          max-width: calc(100vw - 32px);
          border-radius: 20px;
          overflow: hidden;
          background: #1e2540;
          color: #fff;
          border: 1px solid rgba(255,255,255,.08);
          box-shadow: 0 24px 64px rgba(5,10,48,.28);
          display: none;
        }

        .riya-panel.open { display: block; }

        .riya-head {
          padding: 14px 16px 12px;
          background: #1e2540;
          border-bottom: 1px solid rgba(255,255,255,.08);
        }

        .riya-head-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
        }

        .riya-title {
          display: flex;
          gap: 12px;
          align-items: center;
        }

        .riya-badge {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: rgba(255,255,255,.12);
          color: #ffffff;
        }

        .riya-badge img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 12px;
        }

        .riya-title strong {
          display: block;
          font-size: .92rem;
          font-weight: 800;
        }

        .riya-title span {
          display: block;
          color: rgba(255,255,255,.68);
          font-size: .76rem;
        }

        .riya-close {
          border: none;
          background: rgba(255, 255, 255, 0.1);
          color: #ffffff;
          width: 26px;
          height: 26px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 0.72rem;
          transition: background 0.2s;
        }
        .riya-close:hover {
          background: rgba(255, 255, 255, 0.2);
        }

        .riya-messages {
          height: 280px;
          overflow-y: auto;
          padding: 14px;
          background: #1e2540;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .riya-msg {
          max-width: 88%;
          padding: 10px 12px;
          border-radius: 16px;
          font-size: .86rem;
          line-height: 1.55;
        }

        .riya-msg.bot {
          background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.08);
          color: #f8fafc;
          align-self: flex-start;
          border-bottom-left-radius: 4px;
        }

        .riya-msg.bot.typing-indicator {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          min-height: 32px;
          padding: 8px 12px;
        }
        .riya-dots {
          display: inline-flex;
          align-items: center;
          gap: 3px;
        }
        .riya-dots span {
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: #f8fafc;
          opacity: 0.35;
          animation: riyaTypingDot 1s infinite ease-in-out;
        }
        .riya-dots span:nth-child(2) {
          animation-delay: 0.15s;
        }
        .riya-dots span:nth-child(3) {
          animation-delay: 0.3s;
        }
        @keyframes riyaTypingDot {
          0%, 80%, 100% {
            opacity: 0.35;
            transform: translateY(0);
          }
          40% {
            opacity: 1;
            transform: translateY(-2px);
          }
        }

        .riya-msg.user {
          background: #2563eb;
          color: #ffffff;
          align-self: flex-end;
          border-bottom-right-radius: 4px;
        }

        .riya-msg.warning {
          background: rgba(192,57,43,.16);
          border: 1px solid rgba(192,57,43,.35);
          color: #ffd7d2;
        }

        .riya-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 4px;
        }

        .riya-chip,
        .riya-next {
          border: none;
          cursor: pointer;
          font: inherit;
        }

        .riya-chip {
          padding: 7px 14px;
          border-radius: 999px;
          background: rgba(59, 130, 246, 0.08);
          color: #60a5fa;
          border: 1px solid rgba(59, 130, 246, 0.3);
          font-size: .8rem;
          transition: background 0.2s, border-color 0.2s;
        }
        .riya-chip:hover {
          background: rgba(59, 130, 246, 0.15);
          border-color: rgba(59, 130, 246, 0.5);
        }

        .riya-next {
          margin-top: 8px;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 10px 20px;
          border-radius: 999px;
          background: #f1f5f9;
          color: #0f172a;
          font-weight: 700;
          font-size: 0.8rem;
          text-decoration: none;
          text-transform: uppercase;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          transition: background 0.2s;
        }
        .riya-next:hover {
          background: #e2e8f0;
        }

        .riya-foot {
          padding: 14px 16px;
          border-top: 1px solid rgba(255,255,255,.08);
          background: #1e2540;
        }

        .riya-input-wrap {
          display: flex;
          gap: 10px;
        }

        .riya-input {
          flex: 1;
          min-width: 0;
          border: 1px solid rgba(255,255,255,.15);
          background: rgba(255,255,255,.04);
          color: #fff;
          border-radius: 16px;
          padding: 10px 14px;
          font: inherit;
          transition: border-color 0.2s, box-shadow 0.2s;
        }

        .riya-input::placeholder { color: rgba(255,255,255,.45); }

        .riya-input:focus {
          outline: none;
          border-color: #2563eb;
          box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
        }

        .riya-send {
          width: 40px;
          height: 40px;
          border: none;
          border-radius: 50%;
          background: #2563eb;
          color: #fff;
          cursor: pointer;
          font-size: 0.9rem;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background 0.2s;
        }
        .riya-send:hover {
          background: #1d4ed8;
        }

        .riya-meta {
          margin-top: 6px;
          display: flex;
          justify-content: space-between;
          gap: 10px;
          color: rgba(255,255,255,.5);
          font-size: .7rem;
        }

        @media (max-width: 768px) {
          .riya-widget {
            right: 14px;
            bottom: 14px;
          }

          .riya-panel {
            width: calc(100vw - 32px);
          }

          .riya-messages {
            height: 260px;
          }
        }
        @media (max-width: 992px) {
          .fp-top { grid-template-columns: 1fr; gap: 3rem; }
          .fp-links { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
          .fp-links { grid-template-columns: 1fr; }
          .fp-bottom { flex-direction: column; gap: 1rem; text-align: center; }
          .footer-premium { padding: 3rem 1.5rem 1.5rem; }
        }