/* =============================================================
   KEVLO — samu-webart inspired structure, light mode default
   ============================================================= */

/* 1. Tokens */
:root {
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --bg-3: #e8e8ed;
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --ink-mute: #a1a1a6;
  --accent: #059669;
  --accent-2: #10b981;
  --accent-3: #047857;
  --accent-light: #34d399;
  --whatsapp: #168545;
  --glass: rgba(0,0,0,.03);
  --glass-hover: rgba(0,0,0,.06);
  --line: rgba(0,0,0,.08);
  --radius: 16px;
  --radius-sm: 10px;
  --max: 1200px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Space Grotesk', system-ui, sans-serif;
}

/* 2. Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
body{font-family:var(--sans);font-size:16px;line-height:1.6;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit}
p{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance;line-height:1.05;letter-spacing:-.02em}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.text-accent{color:var(--accent)}

/* 3. Nav */
.nav{position:fixed;top:1rem;left:50%;transform:translateX(-50%);width:calc(100% - 2rem);max-width:var(--max);z-index:100;border-radius:100px;background:rgba(255,255,255,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 4px 30px rgba(0,0,0,.06);transition:box-shadow .4s}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.35rem 1rem .35rem 1.75rem}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo img{height:38px!important;width:auto}
.nav-links{display:none;position:relative;align-items:center;gap:0;padding:.5rem}
@media(min-width:720px){.nav-links{display:flex}}
.nav-links a,.nav-links a:visited{font-size:.92rem;font-weight:500;color:var(--ink-mute);padding:.55rem 1.15rem;border-radius:100px;transition:color .25s;position:relative;z-index:2;text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a.is-active{color:var(--accent);font-weight:600}
.nav-lamp{position:absolute;top:.5rem;bottom:.5rem;left:0;border-radius:100px;background:rgba(5,150,105,.12);transition:none;z-index:1;pointer-events:none;box-shadow:0 0 20px rgba(5,150,105,.1)}
.nav-lamp-glow{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:32px;height:10px;background:var(--accent);border-radius:50%;filter:blur(10px);opacity:.7;pointer-events:none}
.nav-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.btn-cta{background:var(--accent);color:#fff!important;font-size:.92rem;font-weight:600;padding:.55rem 1.4rem;border-radius:100px;text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;transition:transform .3s var(--ease-out),box-shadow .3s,letter-spacing .3s;z-index:1;letter-spacing:0}
.btn-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#059669,#10b981,#059669);background-size:200% 200%;border-radius:inherit;z-index:-1;transition:opacity .4s;opacity:0}
.btn-cta::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,#059669,#34d399,#059669);background-size:200% 200%;z-index:-2;filter:blur(8px);opacity:0;transition:opacity .4s}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(5,150,105,.35);letter-spacing:.04em}
.btn-cta:hover::before{opacity:1;animation:ctaGradient 2s ease infinite}
.btn-cta:hover::after{opacity:.6;animation:ctaGradient 2s ease infinite}
.btn-cta:active{transform:scale(.95);transition-duration:.1s}
@keyframes ctaGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.btn-cta:hover{opacity:.9;transform:translateY(-1px)}
.nav-hamburger{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:var(--radius-sm)}
.nav-hamburger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease-out)}
@media(min-width:720px){.nav-hamburger{display:none}}

/* Mobile nav */
.nav-mobile{position:fixed;inset:0;z-index:99;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease-out);display:flex;align-items:center;justify-content:center}
.nav-mobile.is-open{opacity:1;pointer-events:auto}
.nav-mobile-inner{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.nav-mobile-inner a{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--ink-mute);padding:.75rem 1.5rem;border-radius:var(--radius-sm);transition:color .25s}
.nav-mobile-inner a:hover{color:var(--ink)}
.nav-mobile-cta{color:var(--accent)!important}

/* 4. Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.75rem;font-size:.9rem;font-weight:600;border-radius:var(--radius-sm);transition:all .35s var(--ease-out);cursor:pointer}
.btn:active{transform:scale(.97)!important}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 20px rgba(5,150,105,.25)}
.btn-primary:hover{background:var(--accent-3);transform:translateY(-3px);box-shadow:0 12px 40px rgba(5,150,105,.3)}
.btn-dark{background:var(--ink);color:var(--bg);box-shadow:0 4px 20px rgba(0,0,0,.15)}
.btn-dark:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.btn-link{background:none;color:var(--ink);padding:.5rem 0;font-weight:600}
.btn-link:hover{color:var(--accent)}
.btn-link svg{transition:transform .3s var(--ease-out)}
.btn-link:hover svg{transform:translateX(4px)}
.btn-full{width:100%;justify-content:center;padding:.9rem 1.75rem}

/* 5. Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:8rem 0 4rem}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;width:100%;padding-left:clamp(1.5rem,5vw,4rem);padding-right:clamp(1.5rem,5vw,4rem)}
@media(min-width:860px){.hero-inner{grid-template-columns:5fr 7fr;padding-right:0}}
.hero-text-col{text-align:center}
@media(min-width:860px){.hero-text-col{text-align:left}}
.hero-title{font-family:var(--display);font-size:max(2.5rem,5vw);line-height:1.1;font-weight:800;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:2rem}
.hero-accent{color:var(--accent);position:relative}
.hero-accent::after{content:'';position:absolute;bottom:2px;left:0;right:0;height:4px;background:var(--accent);border-radius:2px}
.hero-card{background:var(--ink);color:#fff;border-radius:3rem;padding:2rem;position:relative;z-index:20}
.hero-card p{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.8);margin-bottom:1.5rem;max-width:520px}
.hero-card-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.hero-card .btn.btn-dark{background:var(--accent);color:#fff;border:none}
.hero-card .btn.btn-dark:hover{background:var(--accent-3)}
.hero-card .btn-link{color:rgba(255,255,255,.7)}
.hero-card .btn-link:hover{color:#fff}
.hero-feature{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1)}
.hero-feature-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);color:var(--accent-light);flex-shrink:0}
.hero-feature strong{display:block;font-size:.85rem;color:#fff}
.hero-feature small{font-size:.75rem;color:rgba(255,255,255,.5)}

/* Hero visual */
.hero-visual-col{position:relative;display:none;align-items:center;justify-content:center;width:100%}
@media(min-width:860px){.hero-visual-col{display:flex;justify-content:center}}
.hero-float-img{position:relative;z-index:1}.hero-float-card{position:absolute;bottom:-2rem;left:-1rem;z-index:20;display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;background:var(--accent);color:#fff;border-radius:1.5rem;box-shadow:0 10px 40px rgba(5,150,105,.3);animation:floatBadge 4s ease-in-out infinite}
@media(min-width:860px){.hero-float-card{left:10%}}
.hero-float-card-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--ink);color:#fff;flex-shrink:0}
.hero-float-card strong{display:block;font-size:.85rem;color:#fff}
.hero-float-card small{font-size:.7rem;color:rgba(255,255,255,.5)}
@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Scroll hint */
.section-about{padding:5rem 1.5rem;max-width:var(--max);margin:0 auto}
.about-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
@media(min-width:720px){.about-grid{grid-template-columns:1fr 1fr;gap:4rem}}
.about-visual{position:relative;display:flex;flex-direction:column;align-items:center}
.about-extra-box{display:grid;grid-template-columns:1fr;width:100%;margin-top:-2.5rem;position:relative;z-index:2;padding:0 1rem;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(min-width:720px){.about-extra-box{grid-template-columns:1fr 1fr 1fr}}
.about-extra-item{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding:1rem}
.about-extra-item+.about-extra-item{border-top:1px solid var(--line)}
@media(min-width:720px){.about-extra-item+.about-extra-item{border-top:none;border-left:1px solid var(--line)}}
.about-extra-item svg{color:var(--accent);flex-shrink:0}
.about-extra-item strong{font-family:var(--display);font-size:.8rem;font-weight:700;display:block}
.about-extra-item p{font-size:.72rem;color:var(--ink-mute);line-height:1.35}
.about-photo{width:clamp(200px,40vw,320px);aspect-ratio:3/4;border-radius:var(--radius-sm);overflow:hidden;transition:transform .4s var(--ease-out)}
.about-photo:hover{transform:scale(1.02)}
.about-photo img{width:100%;height:100%;object-fit:cover}

.about-badge{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.25rem;padding:.35rem 1rem;border-radius:100px;font-size:.75rem;font-weight:600;color:var(--accent);background:rgba(5,150,105,.08);border:1px solid rgba(5,150,105,.15)}
.about-extra-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:720px){.about-extra-grid{grid-template-columns:1fr 1fr 1fr}}
.about-extra-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;transition:border-color .3s var(--ease-out),transform .3s var(--ease-out)}
.about-extra-card:hover{border-color:rgba(5,150,105,.25);transform:translateY(-2px)}
.about-extra-card svg{color:var(--accent);margin-bottom:.75rem;width:22px;height:22px}
.about-extra-card h3{font-family:var(--display);font-size:1rem;font-weight:700;margin-bottom:.35rem;letter-spacing:-.02em}
.about-extra-card p{font-size:.85rem;color:var(--ink-mute);line-height:1.55}
.about-badge svg{width:14px;height:14px;flex-shrink:0}
.about-text h2{font-family:var(--display);font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.75rem;line-height:1.1}
.about-lead{font-size:clamp(1.1rem,2.5vw,1.35rem);font-weight:500;color:var(--ink-soft);line-height:1.5;margin-bottom:1rem}
.about-text p{color:var(--ink-mute);line-height:1.7;margin-bottom:1.25rem}
.about-tech{display:flex;flex-wrap:nowrap;gap:.5rem;margin-bottom:1.5rem}
.about-tech-item{font-size:.72rem;font-weight:600;padding:.35rem .5rem;border-radius:100px;background:var(--bg-2);border:1px solid var(--line);color:var(--ink-soft);transition:all .25s var(--ease-out);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-width:64px;text-align:center}
.about-tech-item span{display:block}
.about-tech-item:hover{border-color:var(--accent);color:var(--accent)}
.about-actions{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.about-underline-link{font-size:.875rem;font-weight:500;color:var(--ink-soft);text-decoration:none;background-image:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));background-size:100% 2px;background-repeat:no-repeat;background-position:bottom;padding-bottom:2px;transition:color .3s var(--ease-out),background-size .3s var(--ease-out)}
.about-underline-link:hover{color:var(--ink);background-size:100% 2px}

/* 8. Process */
.process-strip{padding:4rem 1.5rem;max-width:var(--max);margin:0 auto;text-align:center}
.process-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:800px;margin:2.5rem auto 0}
@media(min-width:640px){.process-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.process-grid{grid-template-columns:repeat(4,1fr)}}
.process-step{padding:1.5rem;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);text-align:left;transition:transform .3s var(--ease-out),border-color .3s}
.process-step:hover{transform:translateY(-4px);border-color:var(--accent)}
.process-num{font-family:var(--display);font-size:.7rem;font-weight:800;color:var(--accent);background:rgba(5,150,105,.1);border-radius:6px;padding:.15rem .45rem;display:inline-block;margin-bottom:.75rem}
.process-step h3{font-family:var(--display);font-size:1rem;font-weight:700;margin-bottom:.35rem}
.process-step p{font-size:.82rem;color:var(--ink-mute);line-height:1.5;margin:0}
@media(min-width:640px){.process-strip-arrow{display:inline-flex}}

/* 10. Projects — Fan Carousel */
.section-projects{padding:5rem 1.5rem;max-width:none;overflow:hidden}
.section-header{text-align:center;margin-bottom:3rem}
.section-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:.75rem;padding:.25rem .8rem;border-radius:100px;background:rgba(5,150,105,.08);border:1px solid rgba(5,150,105,.15)}
.section-header h2{font-family:var(--display);font-size:clamp(2rem,5vw,3rem);font-weight:700;letter-spacing:-.03em;margin-bottom:1rem}
.section-header h2 em{color:var(--accent);font-style:normal}
.fan-carousel{display:flex;flex-direction:column;align-items:center;gap:2rem;max-width:var(--max);margin:0 auto}
.fan-layout{position:relative;width:100%;max-width:600px;height:22rem;display:flex;align-items:center;justify-content:center}
@media(min-width:480px){.fan-layout{height:26rem}}
@media(min-width:640px){.fan-layout{height:28rem;max-width:700px}}
@media(min-width:768px){.fan-layout{height:34rem;max-width:800px}}
@media(min-width:1024px){.fan-layout{height:38rem;max-width:900px}}
.fan-card{position:absolute;width:clamp(120px,25vw,200px);aspect-ratio:3/4;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.12);cursor:pointer;will-change:transform;backface-visibility:hidden}
.fan-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.fan-card-overlay{position:absolute;bottom:0;left:0;right:0;padding:.75rem;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);z-index:2;pointer-events:none}
.fan-card-title{color:#fff;font-size:.75rem;font-weight:700;display:block}
.fan-card-badge{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-light)}

/* 11. Quote */
.section-quote{padding:6rem 1.5rem;max-width:900px;margin:0 auto;text-align:center}
.quote-text{font-family:var(--display);font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:600;line-height:1.4;color:var(--ink-mute);border:none;padding:0;margin:0;transition:color .8s var(--ease-out)}
.quote-text.revealed{color:var(--ink)}

/* 12. Promo section */
.section-promo{padding:5rem 1.5rem;max-width:var(--max);margin:0 auto}
.section-promo{position:relative}
.promo-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center;position:relative;z-index:1}
@media(min-width:860px){.promo-grid{grid-template-columns:5fr 7fr}}
.promo-visual{display:flex;align-items:center;justify-content:center;perspective:1000px}
.promo-phone{position:relative;width:280px;transform-style:preserve-3d;transition:transform .4s var(--ease-out)}
.promo-text h2{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;letter-spacing:-.03em;margin-bottom:1rem;line-height:1.1}
.promo-text p{font-size:1rem;color:var(--ink-mute);line-height:1.7;margin-bottom:1.5rem}
.promo-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:100px;font-size:.8rem;font-weight:600;color:var(--accent);background:rgba(5,150,105,.08);border:1px solid rgba(5,150,105,.15)}


/* 14. Plans */
.section-plans{padding:0;max-width:none;z-index:5}
.scroll-container{height:150vh;position:relative}
.scroll-container-inner{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;background:var(--accent);z-index:200;overflow:hidden;will-change:transform}
.scroll-content{width:100%;max-width:1200px;margin:0 auto;opacity:0;transform:translateY(30px);padding:3rem 2rem}
.scroll-content .section-header{text-align:center;margin-bottom:3rem}
.scroll-content .section-header p,.scroll-content .eyebrow{transition:opacity .6s,transform .6s}
.plans-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:1200px;margin:0 auto;align-items:start;padding:0 2rem}
.plan-card{background:var(--bg-2);border-radius:20px;border:1px solid var(--line);padding:2.25rem 1.75rem;display:flex;flex-direction:column;transition:transform .5s var(--ease-out),box-shadow .4s;position:relative}
@media(min-width:720px){.plans-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:719px){.scroll-container{height:200vh}.scroll-container-inner{height:auto;min-height:100vh;overflow:hidden;padding:0}.scroll-content{padding:2rem 0;display:flex;flex-direction:column}.section-header{margin-bottom:1.5rem}.plans-grid{display:flex;flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;gap:1.5rem;padding:0 1.5rem 2rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch;align-items:start;touch-action:pan-y;min-width:0;width:100%}.plans-grid::-webkit-scrollbar{height:4px}.plans-grid::-webkit-scrollbar-thumb{background:rgba(5,150,105,.3);border-radius:4px}.plan-card{flex:0 0 82vw;padding:1.5rem 1.5rem;border-radius:20px;min-height:auto}}
.plan-card:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(0,0,0,.1)}
.plan-card--popular{border-color:var(--accent);box-shadow:0 0 0 1px rgba(5,150,105,.2),0 20px 60px rgba(0,0,0,.1)}
.plan-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;padding:.35rem 1.25rem;border-radius:20px;white-space:nowrap}
.plan-header{margin-bottom:1.25rem}
.plan-header h3{font-family:var(--display);font-size:1.1rem;font-weight:700;margin-bottom:.35rem}
.plan-header p{font-size:.8rem;color:var(--ink-mute);line-height:1.5}
.plan-price{margin-bottom:1.5rem}
.plan-amount{font-family:var(--display);font-size:2rem;font-weight:800;color:var(--ink)}
.plan-period{font-size:.8rem;color:var(--ink-mute);margin-left:.25rem}
.plan-features{list-style:none;margin:0 0 1.5rem;padding:0;flex:1}
.plan-features li{display:flex;align-items:flex-start;gap:.6rem;font-size:.82rem;color:var(--ink-soft);padding:.5rem 0;border-bottom:1px solid var(--line);line-height:1.4}
.plan-features li:last-child{border-bottom:none}
.plan-features li svg{flex-shrink:0;color:var(--accent);margin-top:.15rem}
.plan-card .btn-primary{width:100%}

/* 15. FAQ */
.section-faq{padding:5rem 1.5rem;max-width:none}
.faq-grid{display:grid;grid-template-columns:1fr;gap:3rem;max-width:var(--max);margin:0 auto}
@media(min-width:860px){.faq-grid{grid-template-columns:1fr 1.5fr}}
.faq-left h2{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.5rem);font-weight:700;letter-spacing:-.03em;margin-bottom:1rem}
.faq-left p{color:var(--ink-mute);margin-bottom:1.5rem;line-height:1.6}
.faq-list{display:flex;flex-direction:column;gap:.5rem}
.faq-item{padding:0 1.25rem;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);transition:border-color .3s,box-shadow .3s}
.faq-item[open]{border-color:rgba(5,150,105,.2);box-shadow:0 4px 20px rgba(0,0,0,.06)}
.faq-q{list-style:none;padding:1.15rem 0;font-weight:600;font-size:.9rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;color:var(--ink);transition:color .25s}
.faq-q:hover{color:var(--accent)}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:'+';font-size:1.2rem;color:var(--accent);transition:transform .3s;flex-shrink:0;margin-left:1rem}
.faq-item[open] .faq-q::after{content:'−'}
.faq-a{padding:0 0 1.1rem;font-size:.85rem;color:var(--ink-soft);line-height:1.65}

/* 16. Contact */
.section-contact{padding:6rem 1.5rem;text-align:center;max-width:none;background:var(--bg-2);border-top:1px solid var(--line)}
.contact-inner{max-width:640px;margin:0 auto}
.contact-title{font-family:var(--display);font-size:clamp(2rem,5vw,3.5rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.5rem;line-height:1.1}
.contact-sub{color:var(--ink-mute);font-size:.95rem;margin-bottom:2rem;line-height:1.6}
.contact-info{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-bottom:2rem}
.contact-info-item{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.contact-info-item svg{color:var(--accent);flex-shrink:0}
.contact-info-item a{color:var(--ink-soft);transition:color .25s;text-decoration:none}
.contact-info-item a:hover{color:var(--accent)}
.contact-form{display:flex;flex-direction:column;gap:1rem;text-align:left}
.form-row{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:540px){.form-row{grid-template-columns:1fr 1fr}}
.form-row--3{grid-template-columns:1fr}
@media(min-width:640px){.form-row--3{grid-template-columns:1fr 1fr 1fr}}
.form-input{width:100%;padding:.85rem 1rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.875rem;color:var(--ink);outline:none;transition:border-color .25s,box-shadow .25s}
.form-input::placeholder{color:var(--ink-mute)}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(5,150,105,.1)}
.form-select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:12px}
textarea.form-input{resize:vertical;min-height:100px}
.form-consent{display:flex;align-items:flex-start;gap:.6rem;font-size:.78rem;color:var(--ink-soft);line-height:1.4;cursor:pointer;padding:.25rem 0}
.form-consent input[type="checkbox"]{margin-top:.2rem;accent-color:var(--accent);flex-shrink:0;width:16px;height:16px;cursor:pointer}
.form-consent a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.form-consent a:hover{color:var(--accent-3)}
.form-success{display:none;text-align:center;padding:3rem 1rem}
.form-success.is-visible{display:block}
.form-success h3{font-family:var(--display);font-size:1.5rem;margin-bottom:.5rem}
.form-success p{color:var(--ink-mute)}
.contact-social{display:flex;justify-content:center;gap:1.25rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.contact-social a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--bg);border:1px solid var(--line);color:var(--ink-soft);transition:all .25s var(--ease-out)}
.contact-social a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.contact-whatsapp-link{font-size:.85rem;color:var(--ink-mute);margin-top:1rem}
.contact-whatsapp-link a{color:var(--accent);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.25rem;transition:color .25s}
.contact-whatsapp-link a:hover{color:var(--accent-3)}

/* 17. Footer */
.footer{padding:3rem 1.5rem 1.5rem;border-top:1px solid var(--line)}
.footer-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
@media(min-width:640px){.footer-inner{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-brand p{font-size:.82rem;color:var(--ink-mute);line-height:1.6;max-width:320px}
.footer-links,.footer-contact{display:flex;flex-direction:column;gap:.5rem}
.footer-links strong,.footer-contact strong{font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:.25rem}
.footer-links a,.footer-contact a{font-size:.82rem;color:var(--ink-mute);transition:color .25s;width:fit-content}
.footer-links a:hover,.footer-contact a:hover{color:var(--accent)}
.footer-bottom{max-width:var(--max);margin:1.5rem auto 0;text-align:center;font-size:.75rem;color:var(--ink-mute)}

/* 18. Back to top */
.back-to-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(5,150,105,.3);opacity:0;transform:translateY(20px);transition:all .3s var(--ease-out);z-index:50}
.back-to-top.is-visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(5,150,105,.4)}

/* 19. Device Mockups */
.device{position:relative;display:inline-block}
.device img{display:block;width:100%;height:auto}

/* ── Phone ── */
.device-phone{width:220px;background:var(--ink);border-radius:32px;padding:8px;box-shadow:0 20px 60px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.08)}
.device-phone-screen{position:relative;border-radius:24px;overflow:hidden;background:#000;aspect-ratio:9/19}
.device-phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.device-phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:5;width:80px;height:22px;background:var(--ink);border-radius:0 0 14px 14px}
.device-phone-notch::after{content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--ink);border:1.5px solid #333}
.device-phone-glare{position:absolute;inset:8px;border-radius:24px;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.07),transparent 40%,transparent 60%,rgba(255,255,255,.02));z-index:3}
.promo-phone-process{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.25rem;padding:1.5rem 1rem;background:#fff}
.promo-phone-step{display:flex;align-items:flex-start;gap:.5rem;background:#f8f9fc;border:1px solid #eef0f4;border-radius:10px;padding:.6rem .65rem}
.promo-phone-num{font-family:var(--display);font-weight:800;font-size:.65rem;color:var(--accent);background:rgba(5,150,105,.1);border-radius:6px;padding:.15rem .4rem;line-height:1.3;flex-shrink:0;margin-top:1px}
.promo-phone-step strong{display:block;font-size:.68rem;font-weight:700;color:var(--ink);line-height:1.25}
.promo-phone-step small{display:block;font-size:.56rem;color:var(--ink-mute);line-height:1.25}

/* ── Laptop ── */
.device-laptop{width:100%;max-width:680px;perspective:1200px;margin-left:auto}
.device-laptop-screen{position:relative;border-radius:14px 14px 0 0;overflow:hidden;background:var(--ink);padding:12px 12px 0;box-shadow:0 -4px 20px rgba(0,0,0,.12)}
.device-laptop-screen-inner{position:relative;border-radius:4px;overflow:hidden;background:linear-gradient(145deg,#1a1a2e,#16213e);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:1rem}
.device-laptop-camera{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;width:6px;height:6px;border-radius:50%;background:#111;border:1px solid #333}
.device-laptop-base{position:relative;background:linear-gradient(180deg,#2a2830,#1f1d24);border-radius:0 0 14px 14px;padding:16px 24px 12px;box-shadow:0 8px 30px rgba(0,0,0,.15)}
.device-laptop-keyboard{height:8px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0,rgba(255,255,255,.08) 14px,transparent 14px,transparent 18px);border-radius:2px;margin-bottom:6px;opacity:.6}
.device-laptop-trackpad{width:50px;height:4px;margin:0 auto;background:rgba(255,255,255,.05);border-radius:2px}
.device-laptop-glare{position:absolute;inset:0;border-radius:14px 14px 0 0;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.04),transparent 50%);z-index:3}

/* Mockup combo */
.mockup-combo{position:relative;width:100%;max-width:560px;margin:0 auto;padding-right:2rem}
.mockup-laptop{background:linear-gradient(180deg,#2a2a30,#1a1a20);border-radius:12px 12px 8px 8px;padding:10px 10px 0;box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06)}
.mockup-laptop-top{position:relative;background:#111;border-radius:4px;overflow:hidden}
.mockup-laptop-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:5;width:80px;height:4px;background:#2a2a30;border-radius:0 0 3px 3px}
.mockup-laptop-screen{position:relative;aspect-ratio:16/10;background:#000}
.mockup-laptop-screen img,.mockup-phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0}
.mockup-laptop-base{position:relative;padding:10px 20px 8px}
.mockup-laptop-keyboard{height:6px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) 12px,transparent 12px,transparent 16px);border-radius:2px;margin-bottom:4px;opacity:.5}
.mockup-laptop-trackpad{width:36px;height:3px;margin:0 auto;background:rgba(255,255,255,.04);border-radius:2px}
.mockup-phone{position:absolute;bottom:-0.25rem;right:0;z-index:10;width:110px;background:linear-gradient(180deg,#2a2a30,#1a1a20);border-radius:16px;padding:5px;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06)}
.mockup-phone-top{position:relative;background:#111;border-radius:11px;overflow:hidden}
.mockup-phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:5;width:40px;height:8px;background:#2a2a30;border-radius:0 0 6px 6px}
.mockup-phone-screen{position:relative;aspect-ratio:9/19;background:#000}

@media(max-width:540px){
  .mockup-combo{max-width:380px;padding-right:1.5rem}
  .mockup-phone{width:75px}
  .mockup-phone-notch{width:30px;height:6px}
}

/* Glass browser (removed - unused) */

@media(max-width:540px){
  .device-phone{width:200px}
  .device-phone-notch{width:60px;height:18px;top:8px}
  .device-phone-notch::after{width:6px;height:6px;top:4px}
  .device-phone-step strong{font-size:.75rem}
  .device-phone-step small{font-size:.62rem}
  .device-phone-step{padding:.5rem .55rem}
  .promo-phone-process{padding:1rem .75rem;gap:.2rem}
  .device-laptop{max-width:420px;margin-left:auto;margin-right:auto}
  .device-laptop-screen{padding:8px 8px 0}
  .device-laptop-base{padding:10px 16px 8px}
  .device-laptop-keyboard{height:5px}
}

/* 20. Responsive */
@media(min-width:540px){
  .hero{padding:6rem 2rem 3rem}
  .section-about,.section-projects,.section-quote,.section-promo,.section-faq,.section-contact{padding:5rem 2rem}
}
@media(min-width:860px){
  .hero{padding:8rem 2rem 4rem}
  .section-about,.section-projects,.section-quote,.section-promo,.section-faq,.section-contact{padding:6rem 2rem}
}

/* 21. Mobile optimization */
@media(max-width:539px){
  .hero{padding:7rem 0 3rem}
  .hero-inner{gap:1.5rem}
  .hero-title{font-size:clamp(2rem,8vw,2.5rem)}
  .hero-card{padding:1.5rem;border-radius:1.5rem}
  .hero-card p{font-size:.9rem}
  .hero-card-actions{gap:.75rem}
  .hero-feature{display:none}
  .nav{top:.5rem;width:calc(100% - 1rem);border-radius:16px}
  .nav-inner{padding:.3rem .75rem .3rem 1rem}
  .nav-logo img{height:32px!important}
  .btn-cta{font-size:.82rem;padding:.45rem 1.1rem}
  .nav-hamburger{padding:6px}
  .nav-hamburger span{width:18px;height:2px}
  .nav-mobile-inner a{font-size:1.25rem;padding:.6rem 1.25rem}
  .section-about,.section-projects,.section-quote,.section-faq{padding:3rem 1.25rem}
  .section-promo{padding:3rem 1.25rem}
  .section-contact{padding:4rem 1.25rem}
  .about-grid{gap:2rem}
  .about-text h2{font-size:clamp(1.6rem,6vw,2rem)}
  .about-lead{font-size:1rem}
  .about-tech{gap:.4rem}
  .about-tech-item{font-size:.7rem;padding:.25rem .6rem}
  .process-strip{padding:2.5rem 1.25rem}
  .process-grid{gap:1rem}
  .process-step{padding:1.25rem}
  .fan-layout{height:16rem}
  .fan-card{width:clamp(80px,22vw,120px)}
  .section-quote{padding:4rem 1.25rem}
  .quote-text{font-size:clamp(1.1rem,4.5vw,1.4rem)}
  .promo-grid{gap:2rem}
  .promo-text h2{font-size:clamp(1.4rem,5.5vw,1.8rem)}
  .promo-text p{font-size:.9rem}
  .scroll-container{height:200vh}
  .faq-grid{gap:2rem}
  .faq-left h2{font-size:clamp(1.4rem,5vw,1.8rem)}
  .contact-title{font-size:clamp(1.5rem,6vw,2rem)}
  .contact-sub{font-size:.85rem}
  .contact-form{gap:.75rem}
  .form-input{padding:.75rem .85rem;font-size:.82rem}
  .contact-info{gap:.5rem}
  .contact-info-item{font-size:.82rem}
  .footer{padding:2rem 1.25rem 1rem}
  .footer-inner{gap:1.5rem}
  .back-to-top{bottom:1rem;right:1rem;width:40px;height:40px}
}

/* 20. Reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-float-card{animation:none}
  .quote-text{color:var(--ink)}
}