/* ==========================================================================
   THEASIS DIGITAL GROWTH , style.css  (v3)
   Typeface : Montserrat ONLY (300 / 400 / 600 / 900)
   Approach : Mobile-first. Root-relative paths. No horizontal overflow, ever.

   01. Tokens
   02. Reset & Base
   03. Typography (anti-overflow rules)
   04. Layout primitives
   05. Motion / Reveal
   06. Buttons
   07. Header + Language switcher + Burger
   08. Mobile full-screen menu (100dvh, no inner scroll)
   09. Hero
   10. Stats
   11. Trust bar
   12. Services
   13. Process
   14. Founder / About  (compact)
   15. Testimonials
   16. Portfolio + Lightbox
   17. FAQ
   18. Contact & Form
   19. Footer
   20. Floating WhatsApp
   21. Cookie consent
   22. Utility pages (404 / success / legal)
   23. Breakpoints: 480 / 640 / 768 / 1024 / 1280
   24. Accessibility & print
   ========================================================================== */

/* ── 01. TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* Surfaces */
  --bg:        #0A0A0B;
  --bg-alt:    #0E0E10;
  --surface:   #141417;
  --surface-2: #1A1A1E;

  /* Brand */
  --ac:        #00C896;
  --ac-bright: #16E9AE;
  --ac-deep:   #006B50;
  --ac-soft:   rgba(0,200,150,.10);
  --ac-soft-2: rgba(0,200,150,.18);

  /* Text */
  --t1: #F6F7F8;
  --t2: #9BA0A6;
  --t3: #63676E;
  --t4: #3A3D43;

  /* Lines */
  --bd:    rgba(255,255,255,.07);
  --bd-2:  rgba(255,255,255,.13);
  --bd-ac: rgba(0,200,150,.30);

  /* Type , Montserrat everywhere */
  --ff: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Fluid scale , tuned so nothing ever clips on a 320px screen */
  --fs-eyebrow: clamp(9.5px, 2.6vw, 11px);
  --fs-h1:      clamp(31px, 8.4vw, 66px);
  --fs-h2:      clamp(25px, 6.4vw, 46px);
  --fs-h3:      clamp(15.5px, 4.2vw, 19px);
  --fs-body:    clamp(14.5px, 3.7vw, 16px);
  --fs-small:   clamp(13px, 3.3vw, 14.5px);

  /* Space */
  --gutter:    18px;
  --section-y: clamp(58px, 11vw, 118px);
  --maxw:      1220px;
  --header-h:  64px;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Elevation */
  --sh-2:  0 14px 40px rgba(0,0,0,.45);
  --sh-ac: 0 14px 38px rgba(0,200,150,.22);

  /* Motion */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --tr:       .3s var(--ease);

  /* Layers */
  --z-header:   900;
  --z-menu:     940;
  --z-float:    960;
  --z-cookie:   980;
  --z-lightbox: 1000;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
  overflow-x:clip;
}

body{
  font-family:var(--ff);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.65;
  color:var(--t1);
  background:var(--bg);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Global anti-overflow safety net */
img,svg,video,canvas,iframe{ max-width:100%; display:block; height:auto; }
h1,h2,h3,h4,p,li,a,span,blockquote,summary,label,figcaption{
  overflow-wrap:break-word;
  word-break:normal;
}

a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ list-style:none; }

::selection{ background:rgba(0,200,150,.30); color:#fff; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:rgba(0,200,150,.35); border-radius:var(--r-pill); }
::-webkit-scrollbar-thumb:hover{ background:var(--ac); }

:focus-visible{ outline:2px solid var(--ac); outline-offset:3px; border-radius:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1200;
  background:var(--ac); color:#04120D; padding:12px 20px;
  font-weight:600; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── 03. TYPOGRAPHY ─────────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--ff);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.025em;
  hyphens:auto;
  -webkit-hyphens:auto;
  text-wrap:balance;
}

h1{ font-size:var(--fs-h1); letter-spacing:-.035em; line-height:1.04; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); letter-spacing:-.02em; }

/* Greek words are long, never let a heading push the page sideways */
.hero h1,
.h-sec{
  max-width:100%;
  overflow-wrap:break-word;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ac);
  margin-bottom:14px;
  line-height:1.4;
}
.eyebrow::before{
  content:''; display:block; width:24px; height:1px; flex-shrink:0;
  background:linear-gradient(90deg,transparent,var(--ac));
}

.h-sec{ margin-bottom:14px; }
.h-sec em{ font-style:normal; color:var(--ac); }

.lead{
  font-size:var(--fs-body);
  font-weight:300;
  color:var(--t2);
  line-height:1.75;
  max-width:58ch;
}

.sec-head{ margin-bottom:clamp(30px,6.5vw,58px); max-width:760px; }

.divider{ height:1px; border:0; background:linear-gradient(90deg,transparent,var(--bd-2),transparent); }

/* ── 04. LAYOUT PRIMITIVES ──────────────────────────────────────────────── */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

section{ padding-block:var(--section-y); position:relative; }

/* ── 05. MOTION / REVEAL ────────────────────────────────────────────────── */
.rv{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.rv.in{ opacity:1; transform:none; }
.d1{transition-delay:.07s} .d2{transition-delay:.14s}
.d3{transition-delay:.21s} .d4{transition-delay:.28s} .d5{transition-delay:.35s}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1!important; transform:none!important; transition:none!important; }
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* ── 06. BUTTONS ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  font-family:var(--ff);
  font-size:13.5px; font-weight:600; line-height:1;
  cursor:pointer;
  transition:background var(--tr),color var(--tr),border-color var(--tr),transform var(--tr),box-shadow var(--tr);
  text-align:center;
  -webkit-tap-highlight-color:transparent;
  min-height:46px;                 /* comfortable tap target */
}
.btn i{ font-size:.95em; }

.btn-primary{
  background:var(--ac); color:#04120D;
  box-shadow:0 5px 18px rgba(0,200,150,.16);
}
.btn-primary:hover,.btn-primary:focus-visible{
  background:var(--ac-bright); transform:translateY(-2px); box-shadow:var(--sh-ac);
}

.btn-ghost{
  background:rgba(255,255,255,.02); color:var(--t1); border-color:var(--bd-2);
}
.btn-ghost:hover,.btn-ghost:focus-visible{
  border-color:var(--bd-ac); color:var(--ac); transform:translateY(-2px);
}

.btn-sm{ padding:10px 16px; font-size:12.5px; min-height:40px; }
.btn-block{ width:100%; }

/* ── 07. HEADER ─────────────────────────────────────────────────────────── */
.site-header{
  position:fixed; inset:0 0 auto 0;
  z-index:var(--z-header);
  min-height:var(--header-h);
  display:flex; align-items:center;
  padding-block:10px;
  border-bottom:1px solid transparent;
  transition:background var(--tr),border-color var(--tr),padding var(--tr);
}
.site-header.is-stuck{
  background:rgba(10,10,11,.90);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--bd);
}

.nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; }

.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; min-width:0; }
.brand svg,.brand img{ width:34px; height:34px; flex-shrink:0; }
.brand-name{
  display:block;
  font-weight:900; font-size:17px; letter-spacing:-.04em; line-height:1; color:#fff;
}
.brand-sub{
  display:block;
  font-size:7px; font-weight:400; letter-spacing:.38em;
  text-transform:uppercase; color:var(--t3); margin-top:4px;
}

.nav-links{ display:none; }
.nav-cta{ display:none; }

.nav-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* Language switcher , ALWAYS visible, including mobile */
.lang-switch{
  display:inline-flex; align-items:center;
  border:1px solid var(--bd-2);
  border-radius:var(--r-pill);
  padding:3px;
  background:rgba(255,255,255,.04);
  flex-shrink:0;
}
.lang-switch a{
  display:flex; align-items:center; justify-content:center;
  min-width:36px; height:28px; padding-inline:8px;
  border-radius:var(--r-pill);
  font-size:11px; font-weight:600; letter-spacing:.06em;
  color:var(--t2);
  transition:background var(--tr),color var(--tr);
}
.lang-switch a:hover{ color:var(--t1); }
.lang-switch a[aria-current="true"]{ background:var(--ac); color:#04120D; font-weight:900; }

/* Burger , 3 lines, top right on mobile */
.burger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 11px;
  border:1px solid var(--bd-2);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:border-color var(--tr),background var(--tr);
  -webkit-tap-highlight-color:transparent;
  z-index:calc(var(--z-menu) + 1);
  position:relative;
}
.burger:hover{ border-color:var(--bd-ac); }
.burger span{
  display:block; width:100%; height:1.8px; background:var(--t1);
  border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

/* Scroll progress */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--ac),var(--ac-bright));
  z-index:calc(var(--z-header) + 2);
  transition:width .1s linear;
  pointer-events:none;
}

/* ── 08. MOBILE FULL-SCREEN MENU ────────────────────────────────────────── */
/* Everything fits inside one screen, the visitor never scrolls inside it.   */
.mobile-menu{
  position:fixed;
  top:0; left:0; right:0;
  height:100vh;
  height:100dvh;
  z-index:var(--z-menu);
  background:#0A0A0B;
  background:linear-gradient(170deg,#0E1211 0%,#0A0A0B 55%);
  display:flex; flex-direction:column;
  justify-content:center;
  padding:calc(var(--header-h) + 8px) var(--gutter) calc(14px + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overscroll-behavior:contain;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:none; }

.mobile-menu::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 45% at 80% 8%,rgba(0,200,150,.13),transparent 70%);
}

.mobile-menu .container{ position:relative; padding-inline:0; }

.mobile-menu ul{
  display:flex; flex-direction:column;
  border-top:1px solid var(--bd);
}
.mobile-menu a.m-link{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-weight:900;
  font-size:clamp(16px, 4.6vw, 22px);
  letter-spacing:-.03em;
  line-height:1.15;
  padding-block:clamp(9px, 2.1vh, 15px);
  border-bottom:1px solid var(--bd);
  transition:color var(--tr), padding-left var(--tr);
}
.mobile-menu a.m-link span{
  font-size:10px; font-weight:400; letter-spacing:.2em; color:var(--t4);
  flex-shrink:0;
}
.mobile-menu a.m-link:active,
.mobile-menu a.m-link:hover{ color:var(--ac); padding-left:6px; }

.mobile-menu .m-actions{
  margin-top:clamp(14px, 2.6vh, 26px);
  display:flex; flex-direction:column; gap:9px;
}

.mobile-menu .m-meta{
  margin-top:clamp(12px, 2.2vh, 22px);
  display:flex; flex-wrap:wrap; gap:6px 18px;
  font-size:12px; color:var(--t3);
}
.mobile-menu .m-meta a{ display:inline-flex; align-items:center; gap:6px; }
.mobile-menu .m-meta i{ color:var(--ac); font-size:11px; }
.mobile-menu .m-meta a:hover{ color:var(--ac); }

body.no-scroll{ overflow:hidden; }

/* Very short screens , tighten instead of scrolling */
@media (max-height:620px){
  .mobile-menu a.m-link{ font-size:15px; padding-block:8px; }
  .mobile-menu .m-actions .btn{ min-height:42px; padding-block:11px; }
  .mobile-menu .m-meta{ font-size:11px; }
}

/* ── 09. HERO ───────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:calc(var(--header-h) + 34px);
  padding-bottom:56px;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:-3;
  background-image:url('/images/hero/hero.jpg');
  background-size:cover; background-position:center;
  filter:brightness(.30) saturate(.55);
  transform:scale(1.05);
}
.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(180deg,rgba(10,10,11,.60) 0%,rgba(10,10,11,.40) 32%,rgba(10,10,11,.93) 84%,var(--bg) 100%),
    radial-gradient(85% 55% at 12% 22%,rgba(0,200,150,.11) 0%,transparent 62%);
}
.hero__grid{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(0,200,150,.09) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(72% 58% at 28% 40%,#000 0%,transparent 76%);
  -webkit-mask-image:radial-gradient(72% 58% at 28% 40%,#000 0%,transparent 76%);
}

.hero__inner{ max-width:880px; }

.hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 13px 6px 10px;
  border:1px solid var(--bd-ac);
  background:var(--ac-soft);
  border-radius:var(--r-pill);
  font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ac);
  margin-bottom:20px;
  line-height:1.4;
}
.hero__badge .dot{
  width:6px; height:6px; border-radius:50%; background:var(--ac); flex-shrink:0;
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(0,200,150,.55); }
  70%{ box-shadow:0 0 0 9px rgba(0,200,150,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,200,150,0); }
}

.hero h1{ margin-bottom:18px; }
.hero h1 em{ font-style:normal; color:var(--ac); }

.hero__sub{
  font-size:clamp(14.5px,3.8vw,17px);
  font-weight:300;
  color:var(--t2);
  line-height:1.7;
  max-width:52ch;
  margin-bottom:28px;
}

.hero__actions{ display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }

.hero__proof{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12px; color:var(--t3); }
.hero__proof li{ display:flex; align-items:center; gap:7px; }
.hero__proof i{ color:var(--ac); font-size:10px; flex-shrink:0; }

.scroll-hint{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:none; flex-direction:column; align-items:center; gap:6px;
  font-size:8.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--t4);
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(8px); }
}

/* ── 10. STATS ──────────────────────────────────────────────────────────── */
.stats{ background:var(--surface); border-block:1px solid var(--bd); }
.stats__grid{ display:grid; grid-template-columns:repeat(2,1fr); }
.stat{ text-align:center; padding:22px 8px; position:relative; }
.stat::after{
  content:''; position:absolute; right:0; top:22%; height:56%; width:1px; background:var(--bd);
}
.stat:nth-child(2n)::after{ display:none; }
.stat__num{
  font-weight:900;
  font-size:clamp(30px,8.4vw,44px);
  letter-spacing:-.045em; line-height:1;
  color:var(--ac); margin-bottom:7px;
  font-variant-numeric:tabular-nums;
}
.stat__label{
  font-size:9.5px; font-weight:400; letter-spacing:.13em;
  text-transform:uppercase; color:var(--t3); line-height:1.5;
}

/* ── 11. TRUST BAR ──────────────────────────────────────────────────────── */
.trust{ padding-block:clamp(34px,7vw,54px); border-bottom:1px solid var(--bd); }
.trust__label{
  text-align:center; font-size:9px; font-weight:600; letter-spacing:.3em;
  text-transform:uppercase; color:var(--t4); margin-bottom:20px; line-height:1.6;
}
.trust__row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:9px 20px; }
.trust__row li{
  font-weight:900; font-size:clamp(11px,3vw,14px);
  letter-spacing:.03em; text-transform:uppercase;
  color:#42454A; transition:color var(--tr);
}
.trust__row li:hover{ color:var(--ac); }
.trust__row li.more{
  font-weight:300; font-style:italic; text-transform:none; letter-spacing:0; color:#33363B;
}

/* ── 12. SERVICES ───────────────────────────────────────────────────────── */
.services{ background:var(--bg); }
.services__grid{
  display:grid; grid-template-columns:1fr;
  gap:1px; background:var(--bd);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.service{
  background:var(--surface);
  padding:26px 20px;
  position:relative; overflow:hidden;
  transition:background var(--tr);
}
.service::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(140deg,rgba(0,200,150,.09),transparent 58%);
  opacity:0; transition:opacity var(--tr);
}
.service:hover{ background:var(--surface-2); }
.service:hover::before{ opacity:1; }
.service:hover .service__icon{ color:var(--ac); transform:translateY(-2px) scale(1.06); }

.service__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.service__num{ font-size:10.5px; font-weight:900; letter-spacing:.16em; color:rgba(0,200,150,.34); }
.service__icon{ font-size:22px; color:var(--t3); transition:color var(--tr),transform var(--tr); }

.service h3{ margin-bottom:8px; }
.service p{ font-size:13px; font-weight:300; color:var(--t2); line-height:1.72; }

.service__tag{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  padding:5px 10px;
  border:1px solid var(--bd-ac); background:var(--ac-soft);
  border-radius:var(--r-pill);
  font-size:9.5px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--ac);
}

.service--feature{ background:linear-gradient(150deg,rgba(0,200,150,.07),var(--surface) 62%); }
.service--feature:hover{ background:linear-gradient(150deg,rgba(0,200,150,.11),var(--surface-2) 62%); }
.service--feature .service__icon{ color:var(--ac); }

/* ── 13. PROCESS ────────────────────────────────────────────────────────── */
.process{ background:var(--bg-alt); }
.process__grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.step{
  background:var(--surface);
  border:1px solid var(--bd);
  border-radius:var(--r-md);
  padding:24px 20px;
  transition:border-color var(--tr),transform var(--tr),background var(--tr);
}
.step:hover{ border-color:var(--bd-ac); transform:translateY(-3px); background:var(--surface-2); }
.step__num{ font-size:10px; font-weight:900; letter-spacing:.28em; color:var(--ac); margin-bottom:16px; }
.step__icon{
  width:44px; height:44px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--ac-soft); border:1px solid var(--bd-ac);
  color:var(--ac); font-size:16px; margin-bottom:16px;
}
.step h3{ margin-bottom:9px; }
.step p{ font-size:13px; font-weight:300; color:var(--t2); line-height:1.75; }

/* ── 14. FOUNDER / ABOUT , compact ──────────────────────────────────────── */
.founder{ background:var(--bg); }

.founder__layout{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:start;
}

/* Small, circular, purely supportive , never dominates the section */
.founder__media{
  width:100%;
  max-width:220px;
  margin-inline:auto;
  text-align:center;
}
.founder__photo{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center 22%;
  border-radius:50%;
  border:2px solid rgba(0,200,150,.35);
  padding:4px;
  background:var(--surface-2);
  box-shadow:0 10px 34px rgba(0,0,0,.45);
}
.founder__badge{
  margin-top:14px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.founder__badge strong{
  display:block; font-size:15px; font-weight:900; letter-spacing:-.02em; color:var(--t1);
}
.founder__badge span{
  display:block; font-size:11px; font-weight:400; letter-spacing:.05em; color:var(--ac);
}

.founder__body p{
  font-size:var(--fs-small);
  font-weight:300;
  color:var(--t2);
  line-height:1.8;
  margin-bottom:14px;
  max-width:62ch;
}
.founder__body p strong{ color:var(--t1); font-weight:600; }

/* Compact credential rows , small badges, minimal footprint */
.creds{
  display:flex; flex-direction:column; gap:7px;
  margin:18px 0 0;
}
.cred{
  display:flex; align-items:center; gap:10px;
  padding:8px 11px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--bd);
  border-radius:var(--r-sm);
  transition:border-color var(--tr),background var(--tr);
}
.cred:hover{ border-color:var(--bd-ac); background:var(--ac-soft); }
.cred__deg{
  flex-shrink:0;
  font-size:10px; font-weight:900; letter-spacing:.1em; line-height:1;
  color:var(--ac);
  background:var(--ac-soft); border:1px solid var(--bd-ac);
  border-radius:var(--r-xs);
  padding:5px 7px;
  min-width:38px; text-align:center;
}
.cred__text{
  font-size:11.5px; font-weight:400; color:var(--t2); line-height:1.45; min-width:0;
}
.cred__text b{ color:var(--t1); font-weight:600; }
.cred__text span{ color:var(--t3); }

.founder__links{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }

/* ── 15. TESTIMONIALS ───────────────────────────────────────────────────── */
.testimonials{ background:var(--bg-alt); }
.testimonials__grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.quote{
  background:var(--surface);
  border:1px solid var(--bd);
  border-radius:var(--r-md);
  padding:24px 20px;
  display:flex; flex-direction:column;
  transition:border-color var(--tr),transform var(--tr),background var(--tr);
}
.quote:hover{ border-color:var(--bd-ac); transform:translateY(-3px); background:var(--surface-2); }
.quote__stars{ color:var(--ac); font-size:12px; letter-spacing:.2em; margin-bottom:12px; }
.quote__text{
  font-size:13.5px; font-weight:300; color:var(--t2); line-height:1.8;
  margin-bottom:20px; flex:1;
}
.quote__text::before{ content:'\201C'; }
.quote__text::after{ content:'\201D'; }
.quote__author{ display:flex; align-items:center; gap:11px; }
.avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,var(--ac),var(--ac-deep));
  color:#04120D; font-weight:900; font-size:15px;
}
.quote__name{ display:block; font-size:13.5px; font-weight:900; letter-spacing:-.01em; }
.quote__role{ display:block; font-size:11px; font-weight:400; color:var(--ac); margin-top:1px; }

/* ── 16. PORTFOLIO + LIGHTBOX ───────────────────────────────────────────── */
.portfolio{ background:var(--bg); }
.portfolio__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
}
.work{
  position:relative; overflow:hidden;
  border-radius:var(--r-sm);
  cursor:zoom-in;
  background:var(--surface-2);
  aspect-ratio:1/1;
  -webkit-tap-highlight-color:transparent;
}
.work img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease-out), filter .5s var(--ease);
  filter:grayscale(20%) brightness(.88);
}
.work:hover img,.work:focus-within img{ transform:scale(1.06); filter:none; }
.work__overlay{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; padding:12px;
  background:linear-gradient(to top,rgba(4,18,13,.93) 0%,rgba(4,18,13,.35) 46%,transparent 72%);
  opacity:0; transition:opacity var(--tr);
}
.work:hover .work__overlay,.work:focus-within .work__overlay{ opacity:1; }
.work__label{ font-size:11px; font-weight:900; color:#fff; line-height:1.35; }
.work__label span{ display:block; font-weight:400; font-size:10px; color:var(--ac); margin-top:3px; }

.lightbox{
  position:fixed; inset:0; z-index:var(--z-lightbox);
  background:rgba(4,4,5,.97);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  padding:18px;
}
.lightbox.is-open{ display:flex; }
.lightbox img{
  max-width:94vw; max-height:80vh; object-fit:contain;
  border-radius:var(--r-sm); user-select:none;
  transition:opacity .2s var(--ease);
}
.lb-btn{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--bd-2);
  color:#fff; border-radius:50%;
  width:44px; height:44px; font-size:20px; line-height:1;
  cursor:pointer;
  transition:background var(--tr),border-color var(--tr),color var(--tr);
}
.lb-btn:hover{ background:var(--ac-soft-2); border-color:var(--ac); color:var(--ac); }
.lb-close{ top:14px; right:14px; font-size:22px; }
.lb-prev{ left:10px; top:50%; transform:translateY(-50%); }
.lb-next{ right:10px; top:50%; transform:translateY(-50%); }
.lb-caption{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); text-align:center; width:min(90vw,620px); }
.lb-caption p{ font-size:12.5px; font-weight:600; color:#fff; }
.lb-counter{ font-size:11px; letter-spacing:.2em; color:var(--t3); margin-top:5px; }

/* ── 17. FAQ ────────────────────────────────────────────────────────────── */
.faq{ background:var(--bg-alt); }
.faq__list{ display:flex; flex-direction:column; gap:9px; max-width:860px; }
.faq__item{
  background:var(--surface);
  border:1px solid var(--bd);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color var(--tr);
}
.faq__item[open]{ border-color:var(--bd-ac); }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 18px;
  cursor:pointer; list-style:none;
  font-size:14px; font-weight:600; line-height:1.45;
  transition:color var(--tr);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--ac); }
.faq__item summary::after{
  content:'+'; font-size:21px; font-weight:300; color:var(--ac);
  line-height:1; flex-shrink:0; transition:transform var(--tr);
}
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item p{ padding:0 18px 18px; font-size:13px; font-weight:300; color:var(--t2); line-height:1.8; }

/* ── 18. CONTACT & FORM ─────────────────────────────────────────────────── */
.contact{ background:var(--bg); }
.contact__layout{ display:grid; grid-template-columns:1fr; gap:34px; align-items:start; }

.contact__info .lead{ margin-bottom:24px; }
.contact__list{ margin-bottom:20px; }
.contact__row{
  display:flex; align-items:center; gap:13px;
  padding:13px 0; border-bottom:1px solid var(--bd);
  min-width:0;
}
.contact__row:last-child{ border-bottom:none; }
.contact__row i{
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm);
  background:var(--ac-soft); border:1px solid var(--bd-ac);
  color:var(--ac); font-size:13px;
}
.contact__row .k{ display:block; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--t4); }
.contact__row .v{ display:block; font-size:14px; font-weight:600; transition:color var(--tr); overflow-wrap:anywhere; }
.contact__row a:hover .v{ color:var(--ac); }

.socials{ display:flex; gap:8px; }
.social{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--bd); border-radius:var(--r-sm);
  color:var(--t2); font-size:15px;
  transition:border-color var(--tr),color var(--tr),transform var(--tr),background var(--tr);
}
.social:hover{ border-color:var(--bd-ac); color:var(--ac); background:var(--ac-soft); transform:translateY(-2px); }

.form-card{
  background:var(--surface);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  padding:22px 18px;
}
.form-card__head{ margin-bottom:20px; }
.form-card__head h3{ margin-bottom:5px; }
.form-card__head p{ font-size:12px; font-weight:300; color:var(--t3); }

.field{ margin-bottom:15px; }
.field label{
  display:block;
  font-size:9.5px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  color:var(--t3); margin-bottom:7px;
}
.field label .req{ color:var(--ac); }
.field input,.field select,.field textarea{
  width:100%;
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:var(--r-sm);
  padding:13px 14px;
  font-family:var(--ff);
  font-size:16px;            /* 16px stops iOS from zooming on focus */
  font-weight:400; color:var(--t1);
  transition:border-color var(--tr),box-shadow var(--tr),background var(--tr);
  appearance:none; -webkit-appearance:none;
}
.field textarea{ min-height:92px; resize:vertical; line-height:1.6; }
.field input::placeholder,.field textarea::placeholder{ color:#3B3E43; font-weight:300; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ac);
  box-shadow:0 0 0 3px rgba(0,200,150,.12);
  background:var(--surface-2);
}
.field input:user-invalid,.field textarea:user-invalid{ border-color:#E0553F; }
.field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239BA0A6' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:38px;
}
.field select option{ background:#17171B; color:var(--t1); }
.field-row{ display:grid; grid-template-columns:1fr; gap:0; }

.consent{ display:flex; align-items:flex-start; gap:10px; margin:4px 0 16px; }
.consent input[type="checkbox"]{
  width:19px; height:19px; flex-shrink:0; margin-top:2px;
  accent-color:var(--ac); cursor:pointer;
  appearance:auto; -webkit-appearance:auto;
}
.consent label{
  font-size:11.5px; font-weight:300; line-height:1.6; color:var(--t3);
  letter-spacing:0; text-transform:none; margin:0;
}
.consent label a{ color:var(--ac); text-decoration:underline; text-underline-offset:2px; }

.hp-field{ position:absolute!important; left:-9999px!important; opacity:0; height:0; overflow:hidden; }

.form-note{
  margin-top:13px; font-size:11px; font-weight:300; color:var(--t4);
  display:flex; align-items:flex-start; gap:7px; line-height:1.55;
}
.form-note i{ color:var(--ac); margin-top:2px; flex-shrink:0; }

.form-error{
  display:none; margin-bottom:13px; padding:11px 13px;
  background:rgba(224,85,63,.10);
  border:1px solid rgba(224,85,63,.35);
  border-radius:var(--r-sm);
  font-size:12.5px; color:#F0907C;
}
.form-error.is-visible{ display:block; }

/* ── 19. FOOTER ─────────────────────────────────────────────────────────── */
.site-footer{
  background:var(--bg);
  border-top:1px solid var(--bd);
  padding-block:clamp(40px,8vw,68px) 22px;
}
.footer__grid{ display:grid; grid-template-columns:1fr; gap:28px; margin-bottom:32px; }
.footer__brand p{
  font-size:12.5px; font-weight:300; color:var(--t3);
  line-height:1.75; max-width:38ch; margin-top:13px;
}
.footer__col h4{
  font-size:9.5px; font-weight:900; letter-spacing:.24em; text-transform:uppercase;
  color:var(--t1); margin-bottom:14px;
}
.footer__links{ display:flex; flex-direction:column; gap:9px; }
.footer__links a{
  font-size:12.5px; font-weight:300; color:var(--t3);
  transition:color var(--tr),padding-left var(--tr);
  overflow-wrap:anywhere;
}
.footer__links a:hover{ color:var(--ac); padding-left:4px; }
.footer__links i{ color:var(--ac); font-size:11px; margin-right:8px; width:12px; }

.footer__bottom{
  border-top:1px solid var(--bd);
  padding-top:20px;
  display:flex; flex-direction:column; gap:11px;
  align-items:center; text-align:center;
}
.footer__bottom p{ font-size:11px; font-weight:300; color:var(--t3); }
.footer__bottom .accent{ color:var(--ac); }
.footer__legal{ display:flex; flex-wrap:wrap; gap:6px 15px; justify-content:center; }
.footer__legal a{ font-size:11px; font-weight:300; color:var(--t3); transition:color var(--tr); }
.footer__legal a:hover{ color:var(--ac); }

/* ── 20. FLOATING WHATSAPP ──────────────────────────────────────────────── */
.wa-float{
  position:fixed;
  right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:var(--z-float);
  display:inline-flex; align-items:center;
  height:50px; width:50px;
  border-radius:var(--r-pill);
  background:rgba(18,20,19,.88);
  border:1px solid rgba(0,200,150,.30);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 8px 24px rgba(0,0,0,.42);
  color:var(--ac);
  overflow:hidden;
  transition:width .35s var(--ease-out),background var(--tr),border-color var(--tr),
             transform var(--tr),box-shadow var(--tr),opacity .3s var(--ease),bottom .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.wa-float i{
  min-width:50px; height:50px;
  display:flex; align-items:center; justify-content:center;
  font-size:21px; flex-shrink:0;
}
.wa-float span{
  white-space:nowrap; padding-right:18px;
  font-size:12.5px; font-weight:600; color:#fff;
  opacity:0; transition:opacity .2s var(--ease);
}
.wa-float:hover,.wa-float:focus-visible{
  background:rgba(0,200,150,.14); border-color:var(--ac);
  transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,200,150,.22);
}
.wa-float.is-hidden{ opacity:0; pointer-events:none; transform:translateY(14px); }
.wa-float.is-lifted{ bottom:calc(14px + var(--cookie-h,0px) + env(safe-area-inset-bottom)); }
/* Hide it while the full-screen menu is open, the menu has its own WhatsApp button */
body.no-scroll .wa-float{ opacity:0; pointer-events:none; }

/* ── 21. COOKIE CONSENT ─────────────────────────────────────────────────── */
.cookie{
  position:fixed; left:0; right:0; bottom:0;
  z-index:var(--z-cookie);
  background:rgba(14,14,16,.97);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--bd);
  padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px;
  transform:translateY(110%);
  transition:transform .45s var(--ease-out);
}
.cookie.is-visible{ transform:none; }
.cookie__text{ font-size:12px; font-weight:300; color:var(--t2); line-height:1.65; max-width:72ch; }
.cookie__text a{ color:var(--ac); text-decoration:underline; text-underline-offset:2px; }
.cookie__actions{ display:flex; gap:9px; flex-shrink:0; }
.cookie__actions .btn{ flex:1; }

/* ── 22. UTILITY PAGES ──────────────────────────────────────────────────── */
.page-shell{ min-height:100svh; display:flex; flex-direction:column; padding-top:var(--header-h); }
.page-shell main{ flex:1; }

.state{
  min-height:calc(100svh - var(--header-h));
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:48px var(--gutter);
  position:relative; overflow:hidden;
}
.state::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 50% at 50% 30%,rgba(0,200,150,.10),transparent 70%);
}
.state__inner{ max-width:620px; }
.state__code{
  font-size:clamp(64px,20vw,140px); font-weight:900; letter-spacing:-.06em; line-height:.9;
  background:linear-gradient(180deg,var(--ac),rgba(0,200,150,.15));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:12px;
}
.state__icon{
  width:70px; height:70px; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--ac-soft); border:1px solid var(--bd-ac);
  color:var(--ac); font-size:28px;
}
.state h1{ font-size:clamp(23px,6.4vw,40px); margin-bottom:13px; }
.state p{ font-size:var(--fs-small); font-weight:300; color:var(--t2); line-height:1.75; margin-bottom:11px; }
.state__actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:24px; }
.state__lang{ margin-top:30px; padding-top:20px; border-top:1px solid var(--bd); font-size:12px; color:var(--t3); }
[data-lang-block]{ display:none; }
[data-lang-block].is-active{ display:block; }

.legal{ padding-top:calc(var(--header-h) + 34px); }
.legal__body{ max-width:820px; }
.legal__body h2{
  font-size:clamp(19px,4.8vw,26px);
  margin:34px 0 11px; padding-top:16px; border-top:1px solid var(--bd);
}
.legal__body h2:first-of-type{ border-top:none; padding-top:0; margin-top:24px; }
.legal__body h3{ font-size:15px; margin:20px 0 7px; color:var(--ac); }
.legal__body p,.legal__body li{ font-size:13.5px; font-weight:300; color:var(--t2); line-height:1.82; margin-bottom:11px; }
.legal__body ul{ padding-left:0; }
.legal__body ul li{ position:relative; padding-left:19px; }
.legal__body ul li::before{
  content:''; position:absolute; left:2px; top:11px;
  width:5px; height:5px; border-radius:50%; background:var(--ac);
}
.legal__body a{ color:var(--ac); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.legal__meta{
  font-size:11.5px; font-weight:300; color:var(--t4);
  padding:11px 15px; border:1px solid var(--bd); border-radius:var(--r-sm);
  background:var(--surface); display:inline-block;
}
.legal__toc{
  background:var(--surface); border:1px solid var(--bd);
  border-radius:var(--r-md); padding:18px; margin:24px 0 8px;
}
.legal__toc h4{ font-size:9.5px; font-weight:900; letter-spacing:.22em; text-transform:uppercase; color:var(--t3); margin-bottom:11px; }
.legal__toc a{ display:block; font-size:12.5px; font-weight:300; padding:5px 0; color:var(--t2); }
.legal__toc a:hover{ color:var(--ac); }

/* ══════════════════════════════════════════════════════════════════════════
   23. BREAKPOINTS , mobile-first, every query is min-width
   ══════════════════════════════════════════════════════════════════════════ */

/* ≥ 480px , larger phones */
@media (min-width:480px){
  :root{ --gutter:22px; }
  .hero__actions{ flex-direction:row; flex-wrap:wrap; }
  .hero__actions .btn{ flex:1 1 auto; }
  .cookie__actions .btn{ flex:0 0 auto; min-width:120px; }
}

/* ≥ 640px , small tablets */
@media (min-width:640px){
  :root{ --gutter:26px; --header-h:70px; }
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .field-row{ grid-template-columns:1fr 1fr; gap:0 13px; }
  .form-card{ padding:30px 26px; }
  .cookie{ flex-direction:row; align-items:center; justify-content:space-between; gap:18px; }
  .footer__bottom{ flex-direction:row; justify-content:space-between; text-align:left; }
  .founder__layout{ grid-template-columns:200px 1fr; gap:30px; align-items:center; }
  .founder__media{ margin-inline:0; max-width:200px; }
  .founder__badge{ align-items:flex-start; text-align:left; }
  .creds{ margin-top:16px; }
}

/* ≥ 768px , tablets */
@media (min-width:768px){
  .stats__grid{ grid-template-columns:repeat(4,1fr); }
  .stat:nth-child(2n)::after{ display:block; }
  .stat:last-child::after{ display:none; }
  .process__grid{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .testimonials__grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .testimonials__grid .quote:last-child{ grid-column:span 2; }
  .portfolio__grid{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .work{ aspect-ratio:4/3; }
  .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
  .scroll-hint{ display:flex; }
  .creds{ flex-direction:row; flex-wrap:wrap; }
  .cred{ flex:1 1 240px; }
}

/* ≥ 1024px , desktop */
@media (min-width:1024px){
  :root{ --gutter:32px; --header-h:78px; }

  .site-header{ padding-block:14px; }
  .site-header.is-stuck{ padding-block:10px; }

  .nav-links{ display:flex; align-items:center; gap:28px; margin-left:auto; margin-right:6px; }
  .nav-links a{
    font-size:11.5px; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
    color:var(--t2); position:relative; padding-block:6px;
    transition:color var(--tr);
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
    background:var(--ac); transition:width var(--tr);
  }
  .nav-links a:hover{ color:var(--t1); }
  .nav-links a:hover::after{ width:100%; }

  .nav-cta{ display:inline-flex; }
  .burger{ display:none; }
  .mobile-menu{ display:none; }

  .brand svg,.brand img{ width:40px; height:40px; }
  .brand-name{ font-size:19px; }

  .services__grid{ grid-template-columns:repeat(4,1fr); }
  .service{ padding:32px 26px; }

  .founder__layout{ grid-template-columns:250px 1fr; gap:52px; }
  .founder__media{ max-width:250px; }

  .testimonials__grid{ grid-template-columns:repeat(3,1fr); }
  .testimonials__grid .quote:last-child{ grid-column:auto; }

  .portfolio__grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:225px; gap:8px; }
  .work{ aspect-ratio:auto; }
  .work:nth-child(1),
  .work:nth-child(6),
  .work:nth-child(7),
  .work:nth-child(8),
  .work:nth-child(9),
  .work:nth-child(10){ grid-column:span 2; }

  .contact__layout{ grid-template-columns:.9fr 1.1fr; gap:60px; }
  .contact__info{ position:sticky; top:calc(var(--header-h) + 24px); }

  .form-card{ padding:36px 32px; }

  .wa-float{ right:22px; bottom:22px; }
  .wa-float:hover,.wa-float:focus-visible{ width:198px; }
  .wa-float:hover span,.wa-float:focus-visible span{ opacity:1; }
  .wa-float.is-lifted{ bottom:calc(22px + var(--cookie-h,0px)); }

  .footer__grid{ grid-template-columns:1.5fr 1fr 1fr 1.1fr; }
}

/* ≥ 1280px , wide */
@media (min-width:1280px){
  .service{ padding:36px 28px; }
  .quote{ padding:30px 26px; }
  .step{ padding:32px 28px; }
}

/* Landscape phones , keep the hero usable */
@media (max-height:540px) and (orientation:landscape){
  .hero{ min-height:auto; padding-top:calc(var(--header-h) + 26px); padding-bottom:46px; }
  .scroll-hint{ display:none; }
}

/* ── 24. ACCESSIBILITY & PRINT ──────────────────────────────────────────── */
@media (prefers-contrast:more){
  :root{ --t2:#C9CDD2; --t3:#9BA0A6; --bd:rgba(255,255,255,.18); }
}

@media print{
  .site-header,.mobile-menu,.wa-float,.cookie,.lightbox,.scroll-progress,.scroll-hint{ display:none!important; }
  body{ background:#fff; color:#000; }
  section{ padding-block:18px; }
  a::after{ content:' (' attr(href) ')'; font-size:10px; color:#555; }
}