:root{
  --night:#061423;
  --navy:#071A2F;
  --navy-2:#0A2542;
  --blue:#0B5CAD;
  --blue-2:#1A8CFF;
  --ice:#F5F7FA;
  --paper:#ECF3F8;
  --muted:#A7B8C8;
  --text:#EAF3FB;
  --ink:#111820;
  --line:rgba(255,255,255,.16);
  --soft-line:rgba(7,26,47,.12);
  --shadow:0 24px 80px rgba(3,12,24,.35);
  --radius:28px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--night);
  color:var(--text);
  font-family:Manrope,Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img,video,svg{max-width:100%}
::selection{background:#8fc7ff;color:#061423}

.skip-link{
  position:absolute;left:12px;top:-80px;z-index:999;
  background:#fff;color:#061423;padding:10px 14px;border-radius:10px;
}
.skip-link:focus{top:12px}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:18px clamp(18px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;
  transition:background .35s var(--ease),border .35s var(--ease),padding .35s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(6,20,35,.74);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-top:12px;padding-bottom:12px;
}
.brand{
  display:flex;align-items:center;gap:12px;
  letter-spacing:-.04em;font-weight:800;font-size:1.02rem;
}
.brand-mark{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  font-size:.82rem;letter-spacing:-.05em;
}
.nav{
  display:flex;align-items:center;gap:6px;
  padding:5px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);border-radius:999px;
  backdrop-filter:blur(18px);
}
.nav a{
  color:rgba(234,243,251,.82);
  font-size:.84rem;font-weight:700;
  padding:9px 13px;border-radius:999px;
}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.header-cta{
  background:#F5F7FA;color:#061423;border-radius:999px;
  padding:12px 16px;font-size:.84rem;font-weight:800;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.menu-toggle{display:none;background:none;border:0;color:white;font-weight:900}

.hero{
  min-height:100svh;
  position:relative;
  display:grid;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  padding:118px clamp(18px,4vw,56px) 64px;
}
.hero-media{
  position:absolute;inset:0;z-index:-5;background:#071a2f;
}
.hero-video,.hero-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  filter:saturate(.82) contrast(1.08);
}
.hero-poster{display:none}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 74% 18%,rgba(143,199,255,.16),transparent 34%),
    linear-gradient(90deg,rgba(4,13,26,.94) 0%,rgba(4,13,26,.78) 42%,rgba(4,13,26,.46) 100%),
    linear-gradient(180deg,rgba(4,13,26,.44),rgba(4,13,26,.88) 82%,#061423 100%);
}
.grain{
  position:absolute;inset:-40%;z-index:-2;opacity:.09;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,2%)}30%{transform:translate(3%,-4%)}50%{transform:translate(-2%,5%)}70%{transform:translate(4%,3%)}}

.topography{
  position:absolute;inset:auto 0 -10% auto;width:min(920px,90vw);height:auto;
  z-index:-1;opacity:.65;mix-blend-mode:screen;
  transform:translate3d(10%,0,0);
}
.topography path{
  fill:none;stroke:rgba(143,199,255,.28);stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:900;stroke-dashoffset:900;
  animation:drawContour 2.8s var(--ease) forwards;
}
.topography path:nth-child(2){animation-delay:.12s}
.topography path:nth-child(3){animation-delay:.22s}
.topography path:nth-child(4){animation-delay:.33s}
.topography path:nth-child(5){animation-delay:.44s}
.topography path:nth-child(6){animation-delay:.55s}
@keyframes drawContour{to{stroke-dashoffset:0}}

.hero-inner{
  width:min(1220px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.65fr);
  gap:clamp(28px,5vw,72px);
  align-items:end;
}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(234,243,251,.78);font-weight:800;
}
.kicker::before{
  content:"";width:42px;height:1px;background:rgba(143,199,255,.74);
}
.hero h1{
  margin:22px 0 18px;
  font-family:Manrope,Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:950;
  font-size:clamp(3.05rem,7.4vw,7.2rem);
  line-height:.98;
  letter-spacing:-.018em;
  max-width:980px;
  text-wrap:balance;
}
.hero h1 .line{display:block}
.hero p{
  max-width:680px;
  color:rgba(234,243,251,.84);
  font-size:clamp(1rem,1.45vw,1.28rem);
  margin:0 0 30px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.hero-note{
  margin-top:18px;
  max-width:620px;
  color:rgba(234,243,251,.68);
  font-weight:800;
  font-size:.92rem;
  letter-spacing:-.01em;
  padding-left:18px;
  border-left:2px solid rgba(143,199,255,.58);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid transparent;border-radius:999px;
  padding:14px 18px;font-weight:850;font-size:.92rem;
  cursor:pointer;transition:transform .25s var(--ease),background .25s var(--ease),border .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:#F5F7FA;color:#061423}
.btn-secondary{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff}
.btn-dark{background:#061423;color:white}
.btn-blue{background:#0B5CAD;color:white}
.btn-ghost{border-color:rgba(7,26,47,.16);background:rgba(255,255,255,.48);color:#071A2F}
.route-card{
  align-self:stretch;
  border:1px solid rgba(255,255,255,.15);
  border-radius:32px;
  padding:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  backdrop-filter:blur(22px);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.route-card h2{
  margin:0 0 18px;font-size:1rem;letter-spacing:-.03em;
}
.route-steps{display:grid;gap:12px}
.route-step{
  position:relative;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  padding:14px;border-radius:20px;
  background:rgba(6,20,35,.42);
  border:1px solid rgba(255,255,255,.1);
}
.route-step .num{
  width:42px;height:42px;border-radius:15px;
  display:grid;place-items:center;
  background:rgba(143,199,255,.12);
  border:1px solid rgba(143,199,255,.24);
  color:#bfe0ff;font-weight:900;
}
.route-step strong{display:block;font-size:.95rem}
.route-step span{display:block;color:rgba(234,243,251,.64);font-size:.82rem;margin-top:2px}
.scroll-cue{
  position:absolute;left:clamp(18px,4vw,56px);bottom:22px;
  color:rgba(234,243,251,.58);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;
}
.scroll-cue::after{content:"";width:44px;height:1px;background:rgba(234,243,251,.38)}

.section{
  position:relative;
  padding:clamp(76px,9vw,136px) clamp(18px,4vw,56px);
}
.section.light{background:var(--ice);color:var(--ink)}
.section.deep{background:#061423;color:var(--text)}
.container{width:min(1220px,100%);margin:auto}
.section-head{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(280px,.42fr);
  gap:36px;align-items:end;margin-bottom:42px;
}
.eyebrow{
  display:block;margin-bottom:14px;
  color:#0B5CAD;font-weight:900;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;
}
.deep .eyebrow{color:#8fc7ff}
.section h2{
  margin:0;
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(2.4rem,5.6vw,5.4rem);
  line-height:.94;letter-spacing:-.07em;
}
.section-head p,.lead{
  margin:0;color:rgba(17,24,32,.68);font-size:1.05rem;
}
.deep .section-head p,.deep .lead{color:rgba(234,243,251,.72)}

.problem-grid{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:22px;align-items:stretch;
}
.problem-card{
  border-radius:32px;padding:clamp(24px,4vw,48px);
  background:#fff;border:1px solid rgba(7,26,47,.1);
  box-shadow:0 20px 80px rgba(7,26,47,.08);
}
.problem-card h3{
  font-family:"Fraunces",Georgia,serif;font-size:clamp(2rem,4vw,4rem);
  line-height:.96;letter-spacing:-.06em;margin:0 0 20px;
}
.problem-card p{margin:0;color:rgba(17,24,32,.68);font-size:1.04rem}
.direction-panel{
  border-radius:32px;padding:28px;overflow:hidden;position:relative;
  background:#071A2F;color:white;box-shadow:var(--shadow);min-height:360px;
}
.direction-panel svg{
  position:absolute;inset:auto -8% -8% auto;width:110%;opacity:.58;
}
.direction-panel h3{position:relative;margin:0;font-size:1.5rem;letter-spacing:-.04em;max-width:360px}
.direction-panel p{position:relative;margin:16px 0 0;color:rgba(234,243,251,.72);max-width:360px}

.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.service-card{
  position:relative;min-height:260px;overflow:hidden;
  border-radius:28px;padding:24px;
  background:#fff;border:1px solid rgba(7,26,47,.1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.service-card:hover{transform:translateY(-6px);box-shadow:0 24px 70px rgba(7,26,47,.12)}
.service-card::before{
  content:"";position:absolute;inset:auto 18px 18px auto;width:110px;height:110px;border-radius:36px;
  background:radial-gradient(circle,rgba(26,140,255,.2),rgba(11,92,173,.06) 58%,transparent 70%);
}
.service-card small{color:#0B5CAD;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.service-card h3{margin:18px 0 10px;font-size:1.45rem;letter-spacing:-.05em}
.service-card p{margin:0;color:rgba(17,24,32,.66);font-size:.95rem}
.service-card a{position:absolute;left:24px;bottom:22px;font-weight:900;color:#0B5CAD}

.method-wrap{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start;
}
.method-sticky{
  position:sticky;top:108px;border-radius:32px;padding:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
}
.method-sticky p{color:rgba(234,243,251,.68)}
.method-list{display:grid;gap:14px}
.method-item{
  display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start;
  padding:24px;border-radius:28px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.method-item span{
  width:56px;height:56px;border-radius:20px;
  display:grid;place-items:center;
  background:rgba(143,199,255,.12);
  border:1px solid rgba(143,199,255,.2);
  color:#bfe0ff;font-weight:950;
}
.method-item h3{margin:0 0 6px;font-size:1.25rem}
.method-item p{margin:0;color:rgba(234,243,251,.66)}

.portfolio-section{
  overflow:clip;
}
.portfolio-section .section-head{
  position:relative;
  z-index:3;
}
.portfolio-experience{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:18px;
  align-items:stretch;
}
.portfolio-tabs{
  display:grid;
  gap:10px;
  align-content:start;
}
.portfolio-tab{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:2px 12px;
  width:100%;
  padding:16px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  background:rgba(255,255,255,.045);
  color:#eef6ff;
  text-align:left;
  cursor:pointer;
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.portfolio-tab:hover{
  transform:translateX(4px);
  border-color:rgba(143,199,255,.26);
}
.portfolio-tab.is-active{
  background:rgba(143,199,255,.12);
  border-color:rgba(143,199,255,.35);
}
.portfolio-tab>span{
  grid-row:1 / 3;
  color:#8fc7ff;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
}
.portfolio-tab strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.94rem;
  letter-spacing:-.025em;
}
.portfolio-tab small{
  color:rgba(238,246,255,.54);
  font-size:.75rem;
}
.portfolio-stage{
  --portfolio-x:0;
  --portfolio-y:0;
  position:relative;
  min-height:680px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:38px;
  background:#071a2f;
  box-shadow:0 34px 110px rgba(0,0,0,.34);
  isolation:isolate;
}
.portfolio-backdrop{
  position:absolute;
  inset:-8%;
  z-index:-2;
  background-image:url("assets/portfolio-immersive/andressa-v5-poster.webp");
  background-position:center;
  background-size:cover;
  filter:blur(34px) saturate(.9);
  opacity:.28;
  transform:scale(1.14);
  transition:background-image .35s var(--ease),opacity .35s var(--ease);
  view-transition-name:portfolio-background;
}
.portfolio-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(6,20,35,.97) 0%,rgba(6,20,35,.82) 46%,rgba(6,20,35,.46) 100%),
    linear-gradient(180deg,rgba(6,20,35,.1),rgba(6,20,35,.76));
}
.portfolio-stage-grid{
  min-height:680px;
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(360px,1.18fr);
  gap:34px;
  align-items:center;
  padding:clamp(26px,4vw,52px);
}
.portfolio-copy{
  position:relative;
  z-index:2;
  max-width:480px;
  view-transition-name:portfolio-copy;
}
.portfolio-counter{
  display:block;
  margin-bottom:22px;
  color:#8fc7ff;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.16em;
}
.portfolio-sector{
  display:block;
  margin-bottom:14px;
  color:rgba(238,246,255,.6);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.portfolio-copy h3{
  margin:0 0 18px;
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(2.7rem,5.2vw,5.4rem);
  line-height:.88;
  letter-spacing:-.07em;
  view-transition-name:portfolio-title;
}
.portfolio-copy p{
  margin:0 0 22px;
  color:rgba(238,246,255,.72);
  font-size:1rem;
}
.portfolio-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
}
.portfolio-tags span{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:rgba(238,246,255,.78);
  font-size:.76rem;
  font-weight:850;
}
.portfolio-media{
  position:relative;
  min-height:580px;
  display:grid;
  place-items:center;
  perspective:1200px;
}
.portfolio-device{
  position:relative;
  width:min(360px,82%);
  margin-inline:auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:34px;
  background:#02070c;
  box-shadow:0 44px 110px rgba(0,0,0,.48);
  transform:
    translate3d(calc(var(--portfolio-x) * 10px),calc(var(--portfolio-y) * 8px),0)
    rotateY(calc(var(--portfolio-x) * -3deg))
    rotateX(calc(var(--portfolio-y) * 2.5deg));
  transition:transform .35s var(--ease),opacity .28s var(--ease),filter .28s var(--ease);
  view-transition-name:portfolio-media;
}
.portfolio-stage.is-switching .portfolio-device{
  opacity:.15;
  filter:blur(8px);
  transform:scale(.97);
}
.portfolio-device-bar{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 13px;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.055);
  color:rgba(238,246,255,.5);
  font-size:.7rem;
  font-weight:800;
}
.portfolio-device-bar span{
  display:flex;
  gap:6px;
}
.portfolio-device-bar i{
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
}
.portfolio-device-bar strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portfolio-device video{
  display:block;
  width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  object-position:center top;
  background:#02070c;
}
.portfolio-video-toggle{
  position:absolute;
  right:14px;
  bottom:14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:8px 11px;
  background:rgba(6,20,35,.76);
  color:#fff;
  backdrop-filter:blur(12px);
  font-size:.72rem;
  font-weight:900;
  cursor:pointer;
}
.portfolio-video-toggle:hover{
  background:rgba(6,20,35,.94);
}
::view-transition-group(portfolio-background),
::view-transition-group(portfolio-copy),
::view-transition-group(portfolio-title),
::view-transition-group(portfolio-media){
  animation-duration:.52s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
}

.about-grid{
  display:grid;
  grid-template-columns:minmax(280px,.58fr) minmax(0,1.42fr);
  gap:40px;
  align-items:center;
}
.about-photo{
  width:100%;
  max-width:390px;
  min-height:0;
  aspect-ratio:4/3;
  justify-self:center;
  border-radius:30px;
  overflow:hidden;
  position:relative;
  background:#071A2F;
  box-shadow:var(--shadow);
}
.about-photo picture,.about-photo img{display:block;width:100%;height:100%}
.about-photo img{
  position:absolute;inset:0;object-fit:cover;object-position:center 36%;
}
.about-photo::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(6,20,35,.7));
}
.about-card{
  border-radius:36px;padding:clamp(26px,5vw,54px);
  background:#fff;border:1px solid rgba(7,26,47,.1);
}
.about-card h2{color:#071A2F}
.about-card p{color:rgba(17,24,32,.68);font-size:1.02rem}
.about-signature{
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(7,26,47,.1);
  display:flex;gap:14px;align-items:center;color:#071A2F;font-weight:900;
}
.signature-line{width:52px;height:1px;background:#0B5CAD}

.quiz-shell{
  display:grid;grid-template-columns:.78fr 1.22fr;gap:22px;align-items:stretch;
}
.quiz-info{
  border-radius:32px;padding:28px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.quiz-box{
  border-radius:36px;background:#F5F7FA;color:#071A2F;
  padding:clamp(22px,4vw,38px);min-height:500px;
  box-shadow:var(--shadow);
}
.quiz-progress{
  height:8px;background:rgba(7,26,47,.1);border-radius:999px;overflow:hidden;margin-bottom:24px;
}
.quiz-progress span{display:block;height:100%;background:#0B5CAD;width:20%;transition:width .35s var(--ease)}
.quiz-question small{font-weight:900;color:#0B5CAD;letter-spacing:.12em;text-transform:uppercase}
.quiz-question h3{font-size:clamp(1.7rem,4vw,3.4rem);line-height:.98;letter-spacing:-.06em;margin:12px 0 22px}
.quiz-options{display:grid;gap:10px}
.quiz-option{
  width:100%;border:1px solid rgba(7,26,47,.12);background:#fff;color:#071A2F;
  border-radius:20px;padding:16px 18px;text-align:left;font-weight:850;cursor:pointer;
}
.quiz-option:active{transform:scale(.99)}
.quiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px;align-items:center}
.quiz-back{
  border:0;background:transparent;color:rgba(7,26,47,.62);font-weight:900;cursor:pointer;padding:10px 0;
}
.quiz-back[disabled]{opacity:.28;cursor:not-allowed}
.quiz-count{font-size:.85rem;color:rgba(7,26,47,.58);font-weight:800}
.quiz-result{
  display:none;
  border-radius:28px;background:#071A2F;color:white;padding:24px;
}
.quiz-result.is-visible{display:block}
.quiz-result h3{font-size:clamp(1.8rem,4vw,3.2rem);line-height:.96;letter-spacing:-.06em;margin:0 0 14px}
.quiz-result p{color:rgba(234,243,251,.72)}
.quiz-result .btn{margin-top:10px}
.quiz-restart{
  margin-left:12px;color:#8fc7ff;border:0;background:transparent;font-weight:900;cursor:pointer;
}

.pricing-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.price-card{
  border-radius:26px;padding:22px;background:#fff;border:1px solid rgba(7,26,47,.1);
}
.price-card strong{display:block;color:#071A2F;font-size:1.02rem;letter-spacing:-.03em}
.price-card span{display:block;margin-top:18px;font-size:1.8rem;font-weight:950;color:#0B5CAD;letter-spacing:-.06em}
.price-card small{display:block;margin-top:8px;color:rgba(17,24,32,.58)}
.pricing-note{margin-top:18px;color:rgba(17,24,32,.62);font-size:.93rem}

.faq-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
.faq-item{
  border-radius:24px;padding:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
}
.faq-item strong{display:block;margin-bottom:8px}
.faq-item p{margin:0;color:rgba(234,243,251,.68)}

.contact-card{
  position:relative;overflow:hidden;border-radius:40px;
  padding:clamp(32px,6vw,72px);background:#F5F7FA;color:#071A2F;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;
}
.contact-card h2{max-width:820px}
.contact-card p{max-width:620px;color:rgba(17,24,32,.68)}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.footer{
  padding:26px clamp(18px,4vw,56px);
  background:#061423;color:rgba(234,243,251,.6);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.88rem;
}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.in-view{opacity:1;transform:none}

.hero{
  --hero-scroll:0;
}
.hero-media{
  transform-origin:center;
  animation:hero-frame-enter 1.35s cubic-bezier(.2,.8,.2,1) both;
}
.hero-video{
  transform:scale(calc(1 + var(--hero-scroll) * .06));
  will-change:transform;
}
.hero .kicker{
  animation:hero-copy-enter .75s .35s cubic-bezier(.2,.8,.2,1) both;
}
.hero h1 .line{
  clip-path:inset(0 0 100% 0);
  animation:hero-line-enter .9s cubic-bezier(.2,.8,.2,1) both;
}
.hero h1 .line:first-child{
  animation-delay:.42s;
}
.hero h1 .line:last-child{
  animation-delay:.54s;
}
.hero-copy>p{
  animation:hero-copy-enter .8s .68s cubic-bezier(.2,.8,.2,1) both;
}
.hero-actions{
  animation:hero-copy-enter .8s .8s cubic-bezier(.2,.8,.2,1) both;
}
.hero-note{
  animation:hero-copy-enter .8s .92s cubic-bezier(.2,.8,.2,1) both;
}
.route-card{
  animation:hero-panel-enter .95s .62s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes hero-frame-enter{
  from{
    opacity:.25;
    clip-path:inset(6vh 4vw 6vh 4vw round 34px);
    transform:scale(1.055);
  }
  to{
    opacity:1;
    clip-path:inset(0 0 0 0 round 0);
    transform:scale(1);
  }
}
@keyframes hero-line-enter{
  from{
    opacity:0;
    clip-path:inset(0 0 100% 0);
    transform:translateY(34px);
  }
  to{
    opacity:1;
    clip-path:inset(0 0 0 0);
    transform:translateY(0);
  }
}
@keyframes hero-copy-enter{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes hero-panel-enter{
  from{
    opacity:0;
    transform:translateY(28px) scale(.97);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero-video{display:none}
  .hero-poster{display:block}
}
@media (max-width:980px){
  .nav{display:none}
  .header-cta{display:none}
  .menu-toggle{display:block}
  .mobile-open .nav{
    position:absolute;top:62px;left:18px;right:18px;
    display:grid;border-radius:24px;padding:10px;background:rgba(6,20,35,.92);
  }
  .hero{padding:104px 18px 56px;align-items:end}
  .hero-inner{grid-template-columns:1fr;gap:28px}
  .hero h1{font-size:clamp(3rem,13vw,5.2rem)}
  .route-card{padding:16px;border-radius:26px}
  .route-steps{grid-template-columns:1fr 1fr;gap:8px}
  .route-step{grid-template-columns:1fr;padding:12px}
  .route-step .num{width:34px;height:34px;border-radius:12px}
  .route-step span{font-size:.76rem}
  .scroll-cue{display:none}
  .topography{width:130vw;opacity:.48;right:-40vw;bottom:15%}
  .section{padding:72px 18px}
  .section-head{grid-template-columns:1fr;gap:16px}
  .problem-grid,.method-wrap,.about-grid,.quiz-shell,.contact-card{grid-template-columns:1fr}
  .services-grid,.pricing-grid,.faq-grid{grid-template-columns:1fr 1fr}
  .method-sticky{position:relative;top:auto}
  
  
  
  
  .about-photo{
    width:min(480px,100%);
    min-height:0;
    aspect-ratio:4/3;
  }
  .about-photo img{object-position:center center}
  .contact-actions{justify-content:flex-start}
}
@media (max-width:620px){
  .brand span{font-size:.95rem}
  .hero{
    min-height:100svh;
    align-items:stretch;
    padding-top:88px;
    padding-bottom:28px;
  }
  .hero-media{
    position:absolute;
    inset:0;
    height:100%;
  }
  .hero-video{
    display:block !important;
    object-position:center center;
    opacity:1;
    filter:saturate(1) contrast(1.06);
  }
  .hero-poster{display:none}
  .hero-media::after{
    background:
      linear-gradient(180deg,rgba(4,13,26,.04) 0%,rgba(4,13,26,.14) 30%,rgba(4,13,26,.52) 66%,rgba(4,13,26,.9) 100%),
      linear-gradient(90deg,rgba(4,13,26,.26),rgba(4,13,26,.04));
  }
  .topography{width:150vw;right:-52vw;bottom:18%;opacity:.22}
  .hero-inner{
    min-height:calc(100svh - 116px);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:16px;
    position:relative;
    z-index:2;
  }
  .hero-copy{
    padding-top:0;
    width:100%;
  }
  .hero h1{
    font-family:Manrope,Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-weight:950;
    font-size:clamp(2.42rem,10.8vw,3.55rem);
    line-height:1.04;
    letter-spacing:-.012em;
    max-width:96vw;
    text-shadow:0 16px 42px rgba(0,0,0,.78),0 2px 4px rgba(0,0,0,.5);
  }
  .hero-note{font-size:.88rem;padding-left:14px}
  .hero p{
    font-size:.98rem;
    max-width:92vw;
    text-shadow:0 10px 28px rgba(0,0,0,.52);
  }
  .hero-copy .kicker{
    text-shadow:0 10px 24px rgba(0,0,0,.48);
  }
  .hero-actions .btn{width:100%}
  .route-steps{grid-template-columns:1fr}
  .route-card{display:none}
  .route-card h2{font-size:.94rem}
  .section h2{font-size:clamp(2.25rem,13vw,3.7rem)}
  .services-grid,.pricing-grid,.faq-grid{grid-template-columns:1fr}
  .service-card{min-height:235px}
  .method-item{grid-template-columns:1fr;padding:20px}
  
  
  
  
  
  
  
  
  .about-photo{
    width:100%;
    max-width:420px;
    min-height:0;
    aspect-ratio:4/3;
    border-radius:24px;
  }
  .about-photo img{object-position:center center}
  .about-card{border-radius:28px}
  .quiz-box{
    border-radius:28px;
    min-height:auto;
    padding:18px;
    overflow:visible;
  }
  .quiz-question h3{
    font-size:1.75rem;
    line-height:1.05;
    word-break:normal;
    overflow-wrap:break-word;
  }
  .quiz-options{
    display:grid;
    gap:9px;
  }
  .quiz-option{
    display:block;
    width:100%;
    padding:15px;
    border-radius:17px;
    line-height:1.25;
    min-height:54px;
  }
  .quiz-nav{margin-top:16px}
  .quiz-restart{display:block;margin:14px 0 0}
  .contact-card{border-radius:30px}
  .footer{display:grid}
}

@media (max-width:620px){
  .hero{
    position:relative;
    overflow:hidden;
  }
  .hero-media{
    z-index:-5;
  }
  .hero-copy{
    transform:translateY(0);
  }
  .hero h1{
    font-family:Manrope,Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-weight:950;
    letter-spacing:-.012em;
    line-height:1.04;
  }
  .quiz-options{
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .quiz-option{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}

@media (max-width:980px){
  .portfolio-experience{
    grid-template-columns:1fr;
  }
  .portfolio-tabs{
    display:flex;
    overflow-x:auto;
    padding-bottom:8px;
    scroll-snap-type:x mandatory;
  }
  .portfolio-tab{
    min-width:240px;
    scroll-snap-align:start;
  }
  .portfolio-stage,
  .portfolio-stage-grid{
    min-height:auto;
  }
  .portfolio-stage-grid{
    grid-template-columns:1fr;
  }
  .portfolio-media{
    min-height:520px;
    order:-1;
  }
  .portfolio-device{
    width:min(340px,74vw);
  }
}
@media (max-width:620px){
  .hero-media{
    animation-name:hero-frame-enter-mobile;
  }
  .portfolio-section .section-head{
    margin-bottom:28px;
  }
  .portfolio-tab{
    min-width:220px;
    border-radius:18px;
  }
  .portfolio-stage{
    border-radius:28px;
  }
  .portfolio-stage-grid{
    gap:22px;
    padding:18px;
  }
  .portfolio-copy h3{
    font-size:2.75rem;
  }
  .portfolio-media{
    min-height:470px;
  }
  .portfolio-device{
    width:min(330px,86vw);
    border-radius:28px;
    transform:none;
  }
  .portfolio-device-bar{
    min-height:38px;
  }
}
@keyframes hero-frame-enter-mobile{
  from{
    opacity:.25;
    clip-path:inset(3vh 3vw 3vh 3vw round 24px);
    transform:scale(1.04);
  }
  to{
    opacity:1;
    clip-path:inset(0 0 0 0 round 0);
    transform:scale(1);
  }
}