*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:        #1C3D5A;
      --navy-deep:   #0F2235;
      --teal:        #2BBFCC;
      --teal-light:  #4DD4E0;
      --teal-dark:   #1A9CAB;
      --green:       #62C770;
      --green-dark:  #48B357;
      --cream:       #EBF9FB;
      --cream-dark:  #D4F0F4;
      --text:        #1C2E3D;
      --text-mid:    #4A6070;
      --text-light:  #8A9DAB;
      --grad-brand:  linear-gradient(to bottom, #1C3D5A 0%, #0F2235 40%, #1A9CAB 100%);
      --grad-fresh:  linear-gradient(135deg, #2BBFCC 0%, #62C770 100%);
      --shadow:      0 12px 48px rgba(28,61,90,.13);
      --shadow-teal: 0 12px 40px rgba(43,191,204,.3);
      --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
      --spring:      cubic-bezier(0.32, 0.72, 0, 1);
    }

    html { scroll-behavior: smooth; }
    body { font-family: 'Outfit', sans-serif; color: var(--text); background: #fff; overflow-x: hidden; line-height: 1.6; }

    /* ── ACCESSIBILITY — accessibility-agents skill ── */
    .skip-link { position: absolute; top: -60px; left: 24px; background: var(--teal); color: #fff; padding: 10px 20px; border-radius: 0 0 8px 8px; font-weight: 600; text-decoration: none; z-index: 99999; transition: top .3s; }
    .skip-link:focus { top: 0; }
    :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

    /* ── CUSTOM CURSOR — frontend-design skill ── */
    .cur { position: fixed; width: 10px; height: 10px; background: var(--teal); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%,-50%); transition: width .25s var(--ease-bounce), height .25s var(--ease-bounce), opacity .3s; mix-blend-mode: multiply; }
    .cur-ring { position: fixed; width: 40px; height: 40px; border: 1.5px solid rgba(43,191,204,.5); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%,-50%); transition: all .12s ease; }
    body:hover .cur { opacity: 1; }
    a:hover ~ .cur, button:hover ~ .cur { width: 20px; height: 20px; }

    /* ── GRAIN TEXTURE — frontend-design / brand skill ── */
    .grain { position: fixed; inset: 0; pointer-events: none; z-index: 9997; opacity: .025; 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)'/%3E%3C/svg%3E"); background-size: 200px; }

    /* ── SCROLL PROGRESS ── */
    #prog { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: var(--grad-fresh); z-index: 9999; transition: width .08s linear; border-radius: 0 2px 2px 0; }

    /* ── NAV ── */
    nav { position: fixed; top: 0; inset-inline: 0; z-index: 1000; padding: 20px 0; transition: all .45s ease; }
    nav.scrolled { background: rgba(255,255,255,.94); backdrop-filter: blur(24px) saturate(1.8); padding: 12px 0; box-shadow: 0 1px 0 rgba(28,61,90,.08), 0 4px 30px rgba(28,61,90,.08); }
    .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .logo-wrap { display: flex; align-items: center; gap: 12px; text-decoration: none; }
    .logo-wrap img { height: 86px; width: auto; }
    .logo-text-block { display: none; flex-direction: column; }
    .logo-text-block .ln { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; color: #fff; line-height: 1.1; transition: color .4s; }
    .logo-text-block .lt { font-size: .58rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal); }
    nav.scrolled .logo-text-block .ln { color: var(--navy); }
    .nav-links { list-style: none; display: flex; align-items: center; gap: 28px; }
    .nav-links a { text-decoration: none; font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.88); position: relative; transition: color .3s; letter-spacing: .3px; }
    .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px; background: var(--teal-light); transition: width .35s var(--ease-bounce); border-radius: 1px; }
    .nav-links a:hover { color: #fff; }
    .nav-links a:hover::after { width: 100%; }
    nav.scrolled .nav-links a { color: var(--navy); }
    nav.scrolled .nav-links a:hover { color: var(--teal-dark); }
    nav.scrolled .nav-links a::after { background: var(--teal); }
    .nav-cta { background: var(--grad-fresh) !important; color: #fff !important; padding: 10px 22px; border-radius: 30px; font-weight: 600 !important; box-shadow: 0 4px 20px rgba(43,191,204,.4); transition: transform .3s var(--ease-bounce), box-shadow .3s !important; }
    .nav-cta::after { display: none !important; }
    .nav-cta:hover { transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 8px 28px rgba(43,191,204,.55) !important; }
    .nav-cta:active { transform: scale(0.97) !important; }
    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
    .hamburger span { display: block; width: 24px; height: 1.5px; background: rgba(255,255,255,.9); transition: all .35s ease; border-radius: 2px; }
    nav.scrolled .hamburger span { background: var(--navy); }
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px,4.5px); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px,-4.5px); }
    .mob-menu { display: none; position: fixed; top: 76px; inset-inline: 0; background: #fff; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.12); z-index: 999; border-top: 2px solid var(--cream-dark); }
    .mob-menu.open { display: flex; }
    .mob-menu a { padding: 15px 28px; text-decoration: none; color: var(--navy); font-weight: 500; border-bottom: 1px solid var(--cream); transition: background .2s, color .2s; }
    .mob-menu a:hover { background: var(--cream); color: var(--teal-dark); }
    .mob-menu a:last-child { color: var(--teal-dark); font-weight: 700; border-bottom: none; }

    /* ── HERO ── */
    .hero { min-height: 60vh; position: relative; display: flex; align-items: center; overflow: hidden; background: var(--navy-deep); }
    .hero-bg { position: absolute; inset: 0; background:
        radial-gradient(ellipse at 15% 60%, rgba(43,191,204,.2) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(98,199,112,.16) 0%, transparent 48%),
        radial-gradient(ellipse at 60% 85%, rgba(43,191,204,.12) 0%, transparent 45%),
        linear-gradient(135deg,#0B1D2F 0%,#1C3D5A 55%,#164A5C 100%); }

    /* Animated grid pattern */
    .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(43,191,204,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(43,191,204,.04) 1px, transparent 1px); background-size: 60px 60px; animation: grid-shift 20s linear infinite; }
    @keyframes grid-shift { 0%{background-position:0 0} 100%{background-position:60px 60px} }

    .orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: float-orb 10s ease-in-out infinite; will-change: transform; }
    .orb1 { width:500px;height:500px;background:rgba(43,191,204,.12);top:-100px;right:5%;animation-delay:0s; }
    .orb2 { width:320px;height:320px;background:rgba(98,199,112,.1);bottom:-50px;right:28%;animation-delay:-4s; }
    .orb3 { width:200px;height:200px;background:rgba(78,212,224,.08);top:50%;left:8%;animation-delay:-6s; }
    @keyframes float-orb { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(22px,-32px) scale(1.06)} 70%{transform:translate(-14px,22px) scale(.96)} }

    .sparkle { position:absolute; pointer-events:none; color:rgba(78,212,224,.5); animation:sp 7s ease-in-out infinite; font-size:1rem; }
    @keyframes sp { 0%,100%{transform:translateY(0) rotate(0deg) scale(1);opacity:.4} 50%{transform:translateY(-22px) rotate(180deg) scale(1.3);opacity:.9} }

    /* Breathing rings — frontend-design signature element */
    .breath-rings { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); width: 480px; height: 480px; display: flex; align-items: center; justify-content: center; }
    .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(43,191,204,.18); animation: breathe 4s ease-in-out infinite; }
    .ring:nth-child(1) { width: 100px; height: 100px; border-color: rgba(43,191,204,.6); animation-delay: 0s; }
    .ring:nth-child(2) { width: 180px; height: 180px; border-color: rgba(43,191,204,.4); animation-delay: .4s; }
    .ring:nth-child(3) { width: 270px; height: 270px; animation-delay: .8s; }
    .ring:nth-child(4) { width: 370px; height: 370px; animation-delay: 1.2s; }
    .ring:nth-child(5) { width: 480px; height: 480px; animation-delay: 1.6s; }
    @keyframes breathe { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.08);opacity:.15} }

    .hero-content { position:relative;z-index:10;max-width:1200px;margin:0 auto;padding:30px 40px 30px;display:grid;grid-template-columns:1fr 1fr;gap:140px;align-items:center; }
    .hero-badge { display:inline-flex;align-items:center;gap:10px;background:rgba(43,191,204,.12);border:1px solid rgba(43,191,204,.28);border-radius:30px;padding:8px 20px;font-size:.75rem;color:var(--teal-light);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:28px;animation:fsi 1s ease both; }
    .badge-dot { width:7px;height:7px;background:var(--green);border-radius:50%;animation:pd 2s ease infinite;box-shadow:0 0 8px var(--green); }
    @keyframes pd { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.7);opacity:.5} }
    .hero h1 { font-family:'Playfair Display',serif;font-size:clamp(2.5rem,5vw,3.3rem);font-weight:700;color:#fff;line-height:1.1;margin-bottom:24px;animation:fsi 1s ease .15s both; }
    .hero h1 em { font-style:italic;color:var(--teal-light); }
    .hero-sub { font-size:1.05rem;color:rgba(255,255,255,.65);line-height:1.8;margin-bottom:40px;font-weight:300;animation:fsi 1s ease .3s both;max-width:480px; }
    .hero-btns { display:flex;gap:14px;flex-wrap:wrap;animation:fsi 1s ease .45s both; }
    .btn-p { display:inline-flex;align-items:center;gap:10px;background:var(--grad-fresh);color:#fff;padding:16px 32px;border-radius:50px;font-weight:600;font-size:.95rem;text-decoration:none;transition:transform .35s var(--ease-bounce),box-shadow .35s;box-shadow:0 8px 32px rgba(43,191,204,.4);letter-spacing:.3px; }
    .btn-p:hover { transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px rgba(43,191,204,.55); }
    .btn-s { display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);color:#fff;padding:16px 32px;border-radius:50px;font-weight:500;font-size:.95rem;text-decoration:none;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);transition:all .3s; }
    .btn-s:hover { background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4); }
    .btn-p:active { transform:scale(0.97) !important;transition:transform .1s ease; }
    .btn-s:active { transform:scale(0.97) !important;transition:transform .1s ease; }
    .btn-w:active { transform:scale(0.97) !important;transition:transform .1s ease; }
    .btn-wa:active { transform:scale(0.97) !important;transition:transform .1s ease; }
    .btn-icon-wrap { width:30px;height:30px;background:rgba(0,0,0,.15);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;flex-shrink:0;transition:transform .35s var(--ease-bounce); }
    .btn-p:hover .btn-icon-wrap { transform:translateX(2px) translateY(-1px) scale(1.12); }
    .btn-s .btn-icon-wrap { background:rgba(255,255,255,.15); }
    .btn-s:hover .btn-icon-wrap { transform:translateX(3px); }
    .btn-w .btn-icon-wrap { background:rgba(28,61,90,.1); }
    .btn-w:hover .btn-icon-wrap { transform:translateX(2px) translateY(-1px) scale(1.12); }
    @keyframes fsi { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }

    /* Hero right: circular slideshow */
    .slide-wrap { position:relative;display:flex;flex-direction:column;align-items:center;animation:fsi 1s ease .3s both; }
    .hero-slideshow { position:relative;border-radius:50%;overflow:hidden;aspect-ratio:1/1;width:100%;max-width:420px;background:var(--navy-deep);box-shadow:0 0 0 5px rgba(43,191,204,.25),0 0 0 14px rgba(43,191,204,.1),0 32px 80px rgba(0,0,0,.45); }
    @keyframes circleReveal { from{clip-path:circle(0% at 50% 50%)} to{clip-path:circle(75% at 50% 50%)} }
    .slide { position:absolute;inset:0;opacity:0;clip-path:circle(75% at 50% 50%); }
    .slide.active { opacity:1;animation:circleReveal .8s cubic-bezier(.4,0,.2,1) forwards; }
    .slide img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease; }
    .slide-overlay { position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(15,34,53,.35) 100%); }
    .slide-link { display:block;height:100%;text-decoration:none; }
    .slide-link:hover img { transform:scale(1.06); }
    /* Arrow controls */
    .slide-arrow { position:absolute;top:calc(50% - 30px);transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:.9rem;cursor:pointer;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s var(--ease-bounce);z-index:20; }
    .slide-arrow:hover { background:var(--teal);border-color:var(--teal);transform:translateY(-50%) scale(1.12); }
    .slide-arrow.prev { left:-23px; }
    .slide-arrow.next { right:-23px; }
    /* Title below circle */
    .slide-title { margin-top:22px;text-align:center;min-height:2.8em; }
    .slide-title a { display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);color:#fff;padding:14px 28px;border-radius:50px;font-weight:500;font-size:.95rem;text-decoration:none;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);transition:background .3s,border-color .3s,transform .35s var(--ease-bounce); }
    .slide-title a:hover { background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);transform:translateY(-2px); }
    .slide-title a i { font-size:.8rem;color:var(--teal-light);transition:transform .3s; }
    .slide-title a:hover i { transform:translateX(4px); }
    .slide-title-fade { animation:titleFade .4s ease; }
    @keyframes titleFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

    /* ── TRUST BAR ── */
    .trust { background:#fff;padding:0;border-bottom:1px solid var(--cream-dark);overflow:hidden;position:relative; }
    .trust::before,.trust::after { content:'';position:absolute;top:0;bottom:0;width:140px;z-index:2; }
    .trust::before { left:0;background:linear-gradient(to right,#fff,transparent); }
    .trust::after  { right:0;background:linear-gradient(to left,#fff,transparent); }
    .trust-track { display:flex;gap:0;animation:trust-scroll 24s linear infinite;width:max-content; }
    .trust-item { display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:.82rem;font-weight:600;color:var(--navy);padding:18px 40px;letter-spacing:.4px; }
    .trust-item i { color:var(--teal);font-size:.95rem; }
    @keyframes trust-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

    /* ── SHARED ── */
    section { padding:110px 40px; }
    .container { max-width:1200px;margin:0 auto; }
    .eyebrow { font-size:.68rem;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--teal);margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center; }
    .eyebrow::before { content:'';width:24px;height:1.5px;background:var(--teal);border-radius:1px; }
    .s-title { font-family:'Playfair Display',serif;font-size:clamp(2rem,3.5vw,2.9rem);font-weight:700;color:var(--navy);line-height:1.18;margin-bottom:18px;text-align:center; }
    .s-title em { font-style:italic;color:var(--teal); }
    .s-sub { font-size:.98rem;color:var(--text-mid);line-height:1.8;max-width:580px; }

    /* Reveal — design-system skill: consistent motion tokens */
    .reveal { opacity:0;transform:translateY(40px);transition:opacity .75s ease,transform .75s ease; }
    .reveal-l { opacity:0;transform:translateX(-50px);transition:opacity .75s ease,transform .75s ease; }
    .reveal-r { opacity:0;transform:translateX(50px);transition:opacity .75s ease,transform .75s ease; }
    .reveal-s { opacity:0;transform:scale(.94);transition:opacity .75s ease,transform .75s ease; }
    .reveal.on,.reveal-l.on,.reveal-r.on,.reveal-s.on { opacity:1;transform:none; }

    /* ── PROBLEM ── */
    .problem { background:var(--cream);position:relative;overflow:hidden; }
    .problem::before { content:'';position:absolute;top:-80px;right:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(ellipse,rgba(43,191,204,.08),transparent 70%); }
    .prob-grid { display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center; }
    .prob-img-wrap { border-radius:28px;overflow:visible;position:relative; }
    .prob-img-wrap img { border-radius:28px;overflow:hidden; }
    .prob-img-wrap img { width:100%;height:550px;object-fit:cover;display:block;transition:transform .6s ease; }
    .prob-img-wrap:hover img { transform:scale(1.03); }
    .prob-overlay { position:absolute;inset:0;background:linear-gradient(135deg,rgba(28,61,90,.15),transparent 60%); }
    .prob-badge { position:absolute;bottom:24px;right:24px;background:#fff;border-radius:18px;padding:20px 24px;box-shadow:var(--shadow);border-left:4px solid var(--teal); }
    .prob-badge-n { font-family:'DM Mono',monospace;font-size:2.2rem;font-weight:500;color:var(--teal);line-height:1; }
    .prob-badge-t { font-size:.75rem;color:var(--text-mid);font-weight:500;margin-top:4px; }
    .prob-title { font-family:'Playfair Display',serif;font-size:clamp(1.8rem,2.8vw,2.5rem);font-weight:700;color:var(--navy);line-height:1.18;margin-bottom:24px; }
    .prob-body { font-size:.97rem;color:var(--text-mid);line-height:1.85;margin-bottom:14px; }
    .hi-list { display:flex;flex-direction:column;gap:16px;margin-top:32px; }
    .hi { display:flex;align-items:flex-start;gap:16px; }
    .hi-icon { width:44px;height:44px;background:linear-gradient(135deg,var(--cream-dark),#fff);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;color:var(--teal-dark);box-shadow:0 4px 12px rgba(43,191,204,.15);transition:transform .3s var(--ease-bounce),box-shadow .3s; }
    .hi:hover .hi-icon { transform:scale(1.12);box-shadow:0 8px 20px rgba(43,191,204,.25); }
    .hi strong { display:block;color:var(--navy);font-weight:600;margin-bottom:3px;font-size:.93rem; }
    .hi span { font-size:.85rem;color:var(--text-mid);line-height:1.6; }

    /* ── DIFFERENT ── */
    .different { background:#fff; }
    .diff-head { text-align:center;margin-bottom:64px; }
    .diff-head .s-sub { margin:0 auto; }
    .diff-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
    .diff-card { background:var(--cream);border-radius:24px;padding:40px 32px;position:relative;overflow:hidden;transition:transform .4s var(--ease-bounce),box-shadow .4s;cursor:default;will-change:transform; }
    .diff-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-fresh);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-bounce); }
    .diff-card:hover::before { transform:scaleX(1); }
    .diff-card:hover { transform:translateY(-10px);box-shadow:var(--shadow-teal); }
    .diff-icon-wrap { width:64px;height:64px;background:linear-gradient(135deg,rgba(43,191,204,.15),rgba(98,199,112,.1));border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;font-size:1.8rem;color:var(--teal);transition:transform .4s var(--ease-bounce); }
    .diff-card:hover .diff-icon-wrap { transform:scale(1.12) rotate(-3deg); }
    .diff-card h3 { font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:600;color:var(--navy);margin-bottom:12px; }
    .diff-card p { font-size:.9rem;color:var(--text-mid);line-height:1.75; }
    .diff-no { position:absolute;bottom:18px;right:22px;font-family:'DM Mono',monospace;font-size:4.5rem;font-weight:500;color:rgba(43,191,204,.07);line-height:1;letter-spacing:-2px; }

    /* ── HOW IT WORKS ── */
    .hiw { background:var(--navy);position:relative;overflow:hidden; }
    .hiw::before { content:'';position:absolute;top:-100px;right:-100px;width:600px;height:600px;background:radial-gradient(ellipse,rgba(43,191,204,.1),transparent 70%);border-radius:50%; }
    .hiw::after { content:'';position:absolute;bottom:-80px;left:-80px;width:400px;height:400px;background:radial-gradient(ellipse,rgba(98,199,112,.06),transparent 70%);border-radius:50%; }
    .hiw-head { text-align:center;margin-bottom:80px; }
    .hiw-head .eyebrow { color:var(--teal-light);justify-content:center; }
    .hiw-head .eyebrow::before { background:var(--teal-light); }
    .hiw-head .s-title { color:#fff; }
    .hiw-head .s-sub { color:rgba(255,255,255,.55);margin:0 auto; }
    .steps { display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:1; }
    .steps::before { content:'';position:absolute;top:44px;left:calc(12.5% + 22px);right:calc(12.5% + 22px);height:1px;background:linear-gradient(to right,transparent,rgba(43,191,204,.3),var(--teal),rgba(43,191,204,.3),transparent); }
    .step { text-align:center; }
    .step-circ { width:88px;height:88px;background:rgba(43,191,204,.1);border:1.5px solid rgba(43,191,204,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 28px;position:relative;z-index:1;transition:all .4s var(--ease-bounce); }
    .step:hover .step-circ { background:var(--teal);border-color:var(--teal);box-shadow:0 0 40px rgba(43,191,204,.4),0 0 80px rgba(43,191,204,.15); }
    .step-circ span { font-family:'DM Mono',monospace;font-size:1.4rem;font-weight:500;color:var(--teal-light); }
    .step:hover .step-circ span { color:#fff; }
    .step-icon { font-size:1.4rem;display:block;margin-bottom:10px;color:rgba(255,255,255,.45);transition:color .3s; }
    .step:hover .step-icon { color:var(--teal-light); }
    .step h3 { font-family:'Playfair Display',serif;font-size:1.05rem;color:#fff;margin-bottom:10px;font-weight:600; }
    .step p { font-size:.83rem;color:rgba(255,255,255,.5);line-height:1.7; }

    /* ── CONDITIONS ── */
    .conditions { background:#fff; }
    .cond-head { text-align:center;margin-bottom:60px; }
    .cond-head .s-sub { margin:0 auto; }
    .cond-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px; }
    .cond-card { background:var(--cream);border-radius:18px;padding:28px 20px;text-align:center;border:1.5px solid transparent;transition:all .35s var(--ease-bounce);cursor:default;position:relative;overflow:hidden; }
    .cond-card::after { content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%, rgba(43,191,204,.08), transparent 70%);opacity:0;transition:opacity .3s; }
    .cond-card:hover { border-color:var(--teal);transform:translateY(-5px);box-shadow:0 12px 32px rgba(43,191,204,.15); }
    .cond-card:hover::after { opacity:1; }
    .cond-icon { font-size:1.8rem;margin-bottom:12px;display:block;color:var(--teal);transition:transform .4s var(--ease-bounce); }
    .cond-card:hover .cond-icon { transform:scale(1.2) translateY(-2px);color:var(--teal-dark); }
    .cond-card h4 { font-size:.82rem;font-weight:600;color:var(--navy);line-height:1.4;position:relative;z-index:1; }
    .cond-note { text-align:center;font-size:.85rem;color:var(--text-light);font-style:italic; }

    /* ── TECHNOLOGY ── */
    .tech { background:var(--cream);position:relative; }
    .tech-head { text-align:center;margin-bottom:64px; }
    .tech-grid { display:grid;grid-template-columns:1fr 1fr;gap:24px; }
    .tech-card { background:#fff;border-radius:28px;padding:48px 40px;position:relative;overflow:hidden;transition:transform .4s var(--ease-bounce),box-shadow .4s;border:1px solid rgba(43,191,204,.1); }
    .tech-card:hover { transform:translateY(-8px);box-shadow:var(--shadow-teal); }
    .tech-glow { position:absolute;top:-40px;right:-40px;width:220px;height:220px;background:radial-gradient(ellipse at top right,rgba(43,191,204,.12),transparent 70%);border-radius:50%;transition:transform .6s ease; }
    .tech-card:hover .tech-glow { transform:scale(1.3); }
    .tech-badge { display:inline-flex;align-items:center;gap:7px;background:rgba(43,191,204,.1);color:var(--teal-dark);padding:6px 14px;border-radius:20px;font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:20px; }
    .tech-card-icon { font-size:2.6rem;display:block;margin-bottom:20px;color:var(--teal); }
    .tech-card h3 { font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:700;color:var(--navy);margin-bottom:16px; }
    .tech-card p { font-size:.92rem;color:var(--text-mid);line-height:1.85;margin-bottom:24px; }
    .feat-list { list-style:none;display:flex;flex-direction:column;gap:10px; }
    .feat-list li { display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--text-mid); }
    .feat-list li::before { content:'';width:6px;height:6px;background:var(--green);border-radius:50%;flex-shrink:0;box-shadow:0 0 6px rgba(98,199,112,.5); }

    /* Animated meter — ui-ux-pro-max skill */
    .meter-wrap { margin-top:24px;padding:20px;background:var(--cream);border-radius:16px; }
    .meter-label { display:flex;justify-content:space-between;font-size:.75rem;font-weight:600;color:var(--text-mid);margin-bottom:8px;font-family:'DM Mono',monospace; }
    .meter-bar { height:8px;background:rgba(43,191,204,.15);border-radius:4px;overflow:hidden; }
    .meter-fill { height:100%;width:0;border-radius:4px;background:var(--grad-fresh);transition:width 1.8s cubic-bezier(.17,.67,.35,1);box-shadow:0 0 12px rgba(43,191,204,.4); }
    .meter-fill.on { width:78%; }

    /* ── TESTIMONIALS ── */
    .testimonials { background:#fff; }
    .test-head { text-align:center;margin-bottom:64px; }
    .test-head .s-sub { margin:0 auto; }
    .test-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
    .test-card { background:var(--cream);border-radius:28px;padding:36px 32px;position:relative;transition:transform .4s var(--ease-bounce),box-shadow .4s;border:1px solid transparent; }
    .test-card:hover { transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--cream-dark); }
    .test-card::before { content:'\201C';font-family:'Playfair Display',serif;font-size:8rem;line-height:1;color:rgba(43,191,204,.15);position:absolute;top:0px;right:20px;pointer-events:none; }
    .stars { display:flex;gap:4px;margin-bottom:20px; }
    .star { color:#F5A623;font-size:.85rem; }
    .test-text { font-size:.92rem;color:var(--text-mid);line-height:1.85;font-style:italic;margin-bottom:28px; }
    .test-author { display:flex;align-items:center;gap:14px; }
    .avatar { width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 4px 16px rgba(0,0,0,.12); }
    .av1 { background:linear-gradient(135deg,var(--navy),var(--teal-dark)); }
    .av2 { background:linear-gradient(135deg,var(--green-dark),var(--teal)); }
    .av3 { background:linear-gradient(135deg,var(--teal-dark),var(--green-dark)); }
    .aname { font-weight:600;color:var(--navy);font-size:.9rem;display:block;letter-spacing:.2px; }
    .adetail { font-size:.75rem;color:var(--text-light); }
    .result-pill { display:inline-flex;align-items:center;gap:5px;background:rgba(98,199,112,.12);color:var(--green-dark);padding:3px 10px;border-radius:10px;font-size:.7rem;font-weight:600;margin-top:4px;letter-spacing:.3px; }

    /* ── FAQ ── */
    .faq { background:var(--navy);position:relative;overflow:hidden; }
    .faq::before { content:'';position:absolute;bottom:-120px;left:-120px;width:500px;height:500px;background:radial-gradient(ellipse,rgba(98,199,112,.06),transparent 70%); }
    .faq::after  { content:'';position:absolute;top:-80px;right:-80px;width:350px;height:350px;background:radial-gradient(ellipse,rgba(43,191,204,.07),transparent 70%); }
    .faq-head { text-align:center;margin-bottom:64px;position:relative;z-index:1; }
    .faq-head .s-title { color:#fff; }
    .faq-head .eyebrow { color:var(--green);justify-content:center; }
    .faq-head .eyebrow::before { background:var(--green); }
    .faq-list { max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1; }
    .faq-item { background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;transition:border-color .35s,background .35s; }
    .faq-item.open { border-color:rgba(43,191,204,.35);background:rgba(43,191,204,.04); }
    .faq-q { display:flex;justify-content:space-between;align-items:center;padding:22px 28px;cursor:pointer;gap:20px;user-select:none; }
    .faq-q span { font-size:.97rem;font-weight:500;color:#fff;line-height:1.45; }
    .faq-tog { width:32px;height:32px;background:rgba(43,191,204,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--teal-light);font-size:.8rem;transition:all .4s var(--ease-bounce); }
    .faq-item.open .faq-tog { background:var(--teal);color:#fff;transform:rotate(45deg) scale(1.1); }
    .faq-a { max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1); }
    .faq-a.open { max-height:320px; }
    .faq-a p { padding:0 28px 24px;font-size:.9rem;color:rgba(255,255,255,.58);line-height:1.8; }

    /* ── CTA ── */
    .cta { background:var(--navy);position:relative;overflow:hidden;text-align:center;padding:120px 40px; }
    .cta::before { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:900px;height:900px;background:radial-gradient(ellipse,rgba(255,255,255,.04),transparent 65%); }
    .cta-rings { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;pointer-events:none; }
    .cta-ring { position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.06);animation:breathe 5s ease-in-out infinite; top:50%;left:50%;transform:translate(-50%,-50%); }
    .cta-ring:nth-child(1) { width:200px;height:200px;animation-delay:0s; }
    .cta-ring:nth-child(2) { width:340px;height:340px;animation-delay:.6s; }
    .cta-ring:nth-child(3) { width:500px;height:500px;animation-delay:1.2s; }
    .cta .container { position:relative;z-index:1; }
    .cta .eyebrow { color:var(--teal-light);justify-content:center; }
    .cta .eyebrow::before { background:var(--teal-light); }
    .cta .s-title { color:#fff;max-width:600px;margin:0 auto 20px; }
    .cta-sub { font-size:1.05rem;color:rgba(255,255,255,.68);line-height:1.8;max-width:520px;margin:0 auto 48px; }
    .cta-btns { display:flex;gap:14px;justify-content:center;flex-wrap:wrap; }
    .btn-w { display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--navy);padding:16px 36px;border-radius:50px;font-weight:700;font-size:.95rem;text-decoration:none;transition:transform .35s var(--ease-bounce),box-shadow .35s;box-shadow:0 8px 32px rgba(0,0,0,.2);letter-spacing:.3px; }
    .btn-w:hover { transform:translateY(-4px) scale(1.02);box-shadow:0 16px 44px rgba(0,0,0,.28); }
    .btn-wa { display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:16px 36px;border-radius:50px;font-weight:700;font-size:.95rem;text-decoration:none;transition:transform .35s var(--ease-bounce),box-shadow .35s;letter-spacing:.3px; }
    .btn-wa:hover { transform:translateY(-4px) scale(1.02);box-shadow:0 12px 36px rgba(37,211,102,.45); }
    .cta-note { margin-top:24px;font-size:.82rem;color:rgba(255,255,255,.38);letter-spacing:.3px; }

    /* ── FOOTER ── */
    footer { background:var(--navy-deep);padding:88px 40px 44px; }
    .foot-grid { max-width:1200px;margin:0 auto 64px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px; }
    .foot-brand p { font-size:.87rem;color:rgba(255,255,255,.44);line-height:1.8;margin:16px 0 24px; }
    .foot-name { font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:#fff;letter-spacing:.3px; }
    .foot-tag { font-size:.58rem;letter-spacing:2.5px;color:var(--teal);text-transform:uppercase;display:block;margin-top:2px; }
    .socials { display:flex;gap:10px; }
    .social { width:40px;height:40px;background:rgba(255,255,255,.06);border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;color:rgba(255,255,255,.6);font-size:.95rem;transition:background .3s,color .3s,transform .3s var(--ease-bounce); }
    .social:hover { background:var(--teal);color:#fff;transform:translateY(-3px) scale(1.1); }
    .foot-col h4 { font-size:.7rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:20px; }
    .foot-links { list-style:none;display:flex;flex-direction:column;gap:10px; }
    .foot-links a { text-decoration:none;font-size:.87rem;color:rgba(255,255,255,.5);transition:color .25s,transform .25s;display:flex;align-items:center;gap:9px; }
    .foot-links a i { color:var(--teal);font-size:.8rem;width:14px; }
    .foot-links a:hover { color:var(--teal-light);transform:translateX(4px); }
    .foot-bottom { max-width:1200px;margin:0 auto;padding-top:32px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px; }
    .foot-bottom p { font-size:.78rem;color:rgba(255,255,255,.25); }
    .foot-bottom a { color:rgba(43,191,204,.7);text-decoration:none;transition:color .2s; }
    .foot-bottom a:hover { color:var(--teal-light); }

    /* ── WHATSAPP FLOAT ── */
    .wa-wrap { position:fixed;bottom:32px;right:32px;z-index:9000; }
    .wa-btn { width:60px;height:60px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1.6rem;color:#fff;box-shadow:0 4px 24px rgba(37,211,102,.45);transition:transform .35s var(--ease-bounce),box-shadow .35s;position:relative; }
    .wa-btn:hover { transform:scale(1.14);box-shadow:0 8px 36px rgba(37,211,102,.65); }
    .wa-btn::before { content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(37,211,102,.5);animation:wa-p 2.2s ease infinite; }
    @keyframes wa-p { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.65)} }
    .wa-tip { position:absolute;right:72px;top:50%;transform:translateY(-50%);background:var(--navy);color:#fff;padding:8px 14px;border-radius:10px;font-size:.78rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;transform:translateY(-50%) translateX(6px); }
    .wa-tip::after { content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right:none;border-left-color:var(--navy); }
    .wa-wrap:hover .wa-tip { opacity:1;transform:translateY(-50%) translateX(0); }

    /* ── WAVES ── */
    .wave { display:block;width:100%;overflow:hidden;line-height:0; }
    .wave svg { display:block;width:100%; }

    /* ── RESPONSIVE ── */
    @media(max-width:1024px){
      .hero-content { grid-template-columns:1fr; }
      .breath-rings { display:none; }
      .hero-card-wrap { width:100%;max-width:520px;margin:0 auto; }
      .prob-grid { grid-template-columns:1fr; }
      .prob-badge { right:16px;bottom:16px; }
      .diff-grid { grid-template-columns:1fr 1fr; }
      .steps { grid-template-columns:1fr 1fr; }
      .steps::before { display:none; }
      .cond-grid { grid-template-columns:repeat(3,1fr); }
      .tech-grid { grid-template-columns:1fr; }
      .test-grid { grid-template-columns:1fr 1fr; }
      .foot-grid { grid-template-columns:1fr 1fr;gap:48px; }
    }
    @media(max-width:768px){
      section { padding:70px 24px 40px; }
      nav { padding:14px 0; }
      .nav-inner { padding:0 24px; }
      .nav-links { display:none; }
      .hamburger { display:flex; }
      .hero-content { padding:40px 4px 1px; gap:50px;}
      .diff-grid { grid-template-columns:1fr; }
      .steps { grid-template-columns:1fr; }
      .cond-grid { grid-template-columns:1fr 1fr; }
      .test-grid { grid-template-columns:1fr; }
      .foot-grid { grid-template-columns:1fr;gap:40px; }
      .foot-bottom { flex-direction:column;text-align:center; }
      .cta { padding:88px 24px; }
      .cur,.cur-ring, .hidemobile { display:none; }
      .s-title {font-size: clamp(1.5rem, 3.5vw, 2.9rem);}
      .hero-badge {margin-bottom: 14px;}
      .hero h1 {font-size: clamp(2.0rem, 5vw, 3.3rem);margin-bottom: 14px;}
      .hero-sub {margin-bottom: 20px;}
    }
    @media(max-width:480px){
      .hero-btns,.cta-btns { flex-direction:column;align-items:stretch; }
      .cta-btns { align-items:center; }
      .cond-grid { grid-template-columns:1fr 1fr; }
    }

    /* ── PLAY BUTTON ── */
    .prob-play-btn { position:absolute;inset:0;width:100%;height:100%;background:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:40px;gap:14px;z-index:3; }
    .prob-play-icon { width:72px;height:72px;background:rgba(255,255,255,.95);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(0,0,0,.25);transition:transform .3s var(--ease-bounce),box-shadow .3s;position:relative; }
    .prob-play-icon::before { content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.5);animation:pulse-ring 2s ease-out infinite; }
    .prob-play-icon i { color:var(--teal);font-size:1.5rem;margin-left:4px; }
    .prob-play-btn:hover .prob-play-icon { transform:scale(1.12);box-shadow:0 12px 40px rgba(0,0,0,.35); }
    .prob-play-label { background:rgba(0,0,0,.55);color:#fff;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:20px;backdrop-filter:blur(6px); }
    @keyframes pulse-ring { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.5);opacity:0} }

    /* ── VIDEO MODAL ── */
    .vid-modal { position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; }
    .vid-modal[hidden] { display:none; }
    .vid-modal-backdrop { position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(6px); }
    .vid-modal-box { position:relative;z-index:1;width:min(900px,95vw);animation:modal-in .3s var(--ease-bounce); }
    .vid-modal-frame { position:relative;padding-bottom:56.25%;border-radius:16px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6); }
    .vid-modal-frame iframe { position:absolute;inset:0;width:100%;height:100%; }
    .vid-modal-close { position:absolute;top:-44px;right:0;background:rgba(255,255,255,.12);border:none;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:background .2s; }
    .vid-modal-close:hover { background:rgba(255,255,255,.25); }
    @keyframes modal-in { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }