:root{--bg:#f5f8fc;--bg-elevated:rgba(255,255,255,.72);--surface:rgba(255,255,255,.82);--surface-strong:#fff;--surface-soft:#eaf1f7;--text:#18324b;--muted:#607892;--title:#10263a;--line:rgba(16,38,58,.10);--accent:#2d6ea3;--accent-2:#68a8d3;--accent-soft:rgba(45,110,163,.12);--success:#69b587;--shadow-sm:0 10px 24px rgba(16,38,58,.05);--shadow-md:0 22px 50px rgba(16,38,58,.08);--shadow-lg:0 30px 80px rgba(16,38,58,.12);--radius-sm:16px;--radius-md:22px;--radius-lg:30px;--radius-xl:38px;--radius-pill:999px;--space-sm:.9rem;--space-md:1.2rem;--space-lg:1.7rem;--space-xl:2.4rem;--space-2xl:3.4rem;--space-3xl:4.8rem;--container:1220px;--nav-h:82px;--font-body:Inter,system-ui,sans-serif;--font-title:Manrope,Inter,sans-serif}
body.theme-dark{--bg:#08111c;--bg-elevated:rgba(13,22,34,.70);--surface:rgba(17,28,42,.82);--surface-strong:#111d2b;--surface-soft:#132233;--text:#dce8f4;--muted:#9db1c6;--title:#f5f9fe;--line:rgba(219,234,254,.10);--accent:#6ba9d4;--accent-2:#9fd0ec;--accent-soft:rgba(107,169,212,.14);--success:#7fc79b;--shadow-sm:0 10px 24px rgba(0,0,0,.18);--shadow-md:0 22px 50px rgba(0,0,0,.24);--shadow-lg:0 30px 80px rgba(0,0,0,.32)}
*{box-sizing:border-box}
body,.card,.header,.menu,.btn,.theme-toggle,.field,.trust-card{transition:background-color 1s cubic-bezier(.22,1,.36,1),background 1s cubic-bezier(.22,1,.36,1),color 1s cubic-bezier(.22,1,.36,1),border-color 1s cubic-bezier(.22,1,.36,1),box-shadow 1s cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth}
body{margin:0;will-change:background,color;font-family:var(--font-body);color:var(--text);background:radial-gradient(circle at 10% 10%,rgba(69,129,176,.14),transparent 0 24%),radial-gradient(circle at 90% 8%,rgba(105,181,135,.10),transparent 0 22%),linear-gradient(180deg,var(--bg) 0%,var(--bg) 100%);overflow-x:hidden;transition:background 1s cubic-bezier(.22,1,.36,1),color 1s cubic-bezier(.22,1,.36,1)}
a{text-decoration:none;color:inherit}img{display:block;max-width:100%}button,input,textarea{font:inherit}
.theme-fade{position:fixed;inset:0;pointer-events:none;z-index:120;opacity:0;background:radial-gradient(circle at var(--theme-x,50%) var(--theme-y,50%),rgba(255,255,255,.75),rgba(255,255,255,.22) 22%,transparent 58%);mix-blend-mode:screen;transition:opacity .95s cubic-bezier(.22,1,.36,1),transform 1.05s cubic-bezier(.22,1,.36,1);transform:scale(.92)}
body.theme-dark .theme-fade{background:radial-gradient(circle at var(--theme-x,50%) var(--theme-y,50%),rgba(159,208,236,.22),rgba(107,169,212,.12) 24%,transparent 58%);mix-blend-mode:lighten}
body.theme-switching .theme-fade{opacity:1;transform:scale(1.08)}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.04;background-image:radial-gradient(rgba(16,38,58,.4) .5px,transparent .5px);background-size:16px 16px;z-index:0}
.orb{position:fixed;width:34rem;height:34rem;border-radius:50%;filter:blur(72px);pointer-events:none;opacity:.22;z-index:0;will-change:transform;transition:transform 1.2s cubic-bezier(.22,1,.36,1),background 1s cubic-bezier(.22,1,.36,1),opacity 1s cubic-bezier(.22,1,.36,1)}
.orb.one{top:-10rem;left:-8rem;background:rgba(69,129,176,.55)}.orb.two{top:8rem;right:-10rem;background:rgba(105,181,135,.30)}
.container{width:min(var(--container),calc(100% - 2rem));margin-inline:auto;position:relative;z-index:1}
.section{padding-block:var(--space-3xl);position:relative}.section-head{max-width:780px;margin-bottom:var(--space-xl)}.section-head p{margin-top:var(--space-sm)}
h1,h2,h3{margin:1.25rem 0px 0 0;font-family:var(--font-title);line-height:1.02;letter-spacing:-.04em;color:var(--title)}
h1{font-size:clamp(2.6rem,6vw,5rem);max-width:11ch}h2{font-size:clamp(2rem,4vw,3.8rem);max-width:13ch}h3{font-size:clamp(1.18rem,2vw,1.55rem)}
p{margin:0;line-height:1.72;color:var(--muted);font-size:1.04rem}.accent{color:var(--accent)}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;padding:.62rem .98rem;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);color:var(--title);font-size:.93rem;backdrop-filter:blur(14px);box-shadow:var(--shadow-sm)}
.eyebrow:before{content:"";width:.62rem;height:.62rem;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--success))}
.header{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);background:color-mix(in srgb,var(--bg) 74%,transparent);border-bottom:1px solid var(--line)}
.nav{min-height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.9rem;font-weight:800;letter-spacing:-.03em;color:var(--title)}
.brand-mark{width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 16px 34px rgba(45,110,163,.22);transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1),background 1s cubic-bezier(.22,1,.36,1)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06);box-shadow:0 22px 44px rgba(45,110,163,.28)}
.brand img{height: 60px;width: auto;}
.menu{display:flex;align-items:center;gap:.45rem;padding:.35rem;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.menu a{position:relative;padding:.82rem 1rem;border-radius:var(--radius-pill);font-size:.96rem;transition:color .35s ease,background .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.menu a:after{content:"";position:absolute;left:1rem;right:1rem;bottom:.42rem;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .35s ease;opacity:.85}
.menu a:hover,.menu a.active{background:var(--accent-soft);color:var(--title);transform:translateY(-1px)}.menu a:hover:after,.menu a.active:after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:.8rem}
.btn,.theme-toggle{display:inline-flex;white-space: nowrap;align-items:center;justify-content:center;gap:.65rem;padding:1rem 1.25rem;border-radius:var(--radius-pill);border:1px solid transparent;font-weight:700;cursor:pointer;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1),background .35s ease,border-color .35s ease,color .35s ease}
.btn:before,.theme-toggle:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 18%,rgba(255,255,255,.26) 50%,transparent 82%);transform:translateX(-130%);transition:transform .9s cubic-bezier(.22,1,.36,1);pointer-events:none}
.btn:hover:before,.theme-toggle:hover:before{transform:translateX(130%)}.btn:hover,.theme-toggle:hover{transform:translateY(-2px)}
.btn:hover{box-shadow:0 20px 42px rgba(16,38,58,.12);border-color:color-mix(in srgb,var(--accent) 18%,var(--line))}
.btn-primary:hover{box-shadow:0 24px 54px rgba(45,110,163,.26),0 0 0 1px rgba(255,255,255,.08) inset}
.btn-secondary:hover{background:color-mix(in srgb,var(--surface-strong) 82%,var(--accent-soft));box-shadow:0 20px 42px rgba(16,38,58,.10)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 16px 34px rgba(45,110,163,.22)}
.btn-secondary,.theme-toggle{background:var(--surface);color:var(--title);border-color:var(--line);box-shadow:var(--shadow-sm)}
.mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  padding: 0;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--title);
}

.hamburger-icon {
  width: 22px;
  height: 22px;
  display: block;
}
.hero{padding-top:var(--space-2xl);padding-bottom:var(--space-xl)}
.hero-grid,.services-grid,.work-grid,.pricing-grid,.process-grid,.faq-grid,.cta-grid,.trust-grid,.seo-grid{display:grid;gap:var(--space-md)}
.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}.hero-copy p{margin-top:var(--space-md);max-width:62ch;font-size:1.08rem}.hero-actions,.hero-proof{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.hero-proof span{padding:.68rem .92rem;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface);color:var(--title)}
.hero-stage{position:relative;min-height:620px}.hero-photo{position:absolute;inset:0 0 76px 42px;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s cubic-bezier(.22,1,.36,1),border-color .35s ease}.hero-stage:hover .hero-photo{transform:scale(1.018) translateY(-4px);box-shadow:0 40px 100px rgba(16,38,58,.16)}.hero-photo img{width:100%;height:100%;object-fit:cover}
.floating-card,.mini-panel,.card{background:linear-gradient(180deg,var(--surface-strong),var(--surface));border:1px solid var(--line);box-shadow:var(--shadow-lg);backdrop-filter:blur(18px)}
.floating-card,.mini-panel{transition:transform .65s cubic-bezier(.22,1,.36,1),box-shadow .65s cubic-bezier(.22,1,.36,1),border-color .35s ease}
.hero-stage:hover .floating-card{transform:translateY(-6px) translateX(4px)}.hero-stage:hover .mini-panel{transform:translateY(6px) translateX(-4px)}
.floating-card{position:absolute;left:0;bottom:0;width:min(360px,90%);border-radius:var(--radius-lg);padding:var(--space-lg)}.floating-card h3{margin-bottom:var(--space-md)}
.bullet-list{display:grid;gap:.8rem}.bullet-list div{display:grid;grid-template-columns:1.2rem 1fr;gap:.8rem;align-items:start;color:var(--title)}.bullet-list i{width:1.2rem;height:1.2rem;display:inline-grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-style:normal;font-size:.8rem;margin-top:.14rem}
.mini-panel{position:absolute;right:0;top:44px;width:min(260px,80%);border-radius:var(--radius-md);padding:1rem}.mini-panel .label{color:var(--muted);font-size:.88rem}.mini-panel .big{font-size:2.1rem;color:var(--title);font-weight:900;line-height:1;margin:.4rem 0;letter-spacing:-.04em}
.trust-grid{grid-template-columns:repeat(4,1fr);margin-top:var(--space-xl)}.trust-card{padding:1.1rem 1rem;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);color:var(--title);font-weight:700;text-align:center;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1),border-color .35s ease}.trust-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 24%,var(--line))}
.card{border-radius:var(--radius-lg);padding:var(--space-lg);position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),border-color .35s ease,background 1s cubic-bezier(.22,1,.36,1)}
.card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 44%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.card:hover{transform:translateY(-8px);box-shadow:0 34px 90px rgba(16,38,58,.14);border-color:color-mix(in srgb,var(--accent) 20%,var(--line))}.card:hover:after{opacity:1}.card-title{margin-top:var(--space-md);margin-bottom:var(--space-md);line-height:1.14}.card-copy{margin-top:var(--space-sm)}
.icon-badge{width:2.8rem;height:2.8rem;display:grid;place-items:center;border-radius:16px;background:var(--accent-soft);border:1px solid rgba(45,110,163,.18);color:var(--accent);font-size:1.05rem}
.services-grid,.work-grid,.pricing-grid{grid-template-columns:repeat(3,1fr)}
.portfolio-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:var(--space-md)}.portfolio-lead{grid-row:span 2}.portfolio-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:var(--space-lg)}
.metric{padding:.95rem;border-radius:var(--radius-md);background:color-mix(in srgb,var(--surface-soft) 78%,white);border:1px solid var(--line);text-align:center}.metric strong{display:block;font-size:1.6rem;color:var(--title);line-height:1;margin-bottom:.35rem;letter-spacing:-.04em}
.case-tag-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--space-md)}.case-tag{padding:.52rem .78rem;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);color:var(--title);font-size:.88rem}
.case-proof{margin-top:var(--space-lg);display:grid;gap:.8rem}.case-proof div{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-radius:var(--radius-md);background:color-mix(in srgb,var(--surface-soft) 78%,white);border:1px solid var(--line);color:var(--title)}.case-proof span:last-child{color:var(--accent);font-weight:700}.case-cta{margin-top:var(--space-lg)}
.price-toggle{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);margin-top:var(--space-md)}
.price-toggle button{border:0;background:transparent;color:var(--text);padding:.72rem .9rem;border-radius:var(--radius-pill);cursor:pointer;font-weight:700}.price-toggle button.active{background:var(--accent-soft);color:var(--title)}.price-note{margin-top:.75rem;font-size:.92rem}
.service-card,.work-card,.price-card,.process-card{position:relative;overflow:hidden}.service-card:after{content:"";position:absolute;inset:auto auto -5rem -5rem;width:10rem;height:10rem;border-radius:50%;background:radial-gradient(circle,rgba(45,110,163,.12),transparent 70%)}
.work-card{padding:.9rem}.work-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--line);margin-bottom:var(--space-lg)}
.seo-grid{grid-template-columns:1.1fr .9fr;align-items:start}.seo-panel{border-radius:var(--radius-lg);padding:var(--space-xl);border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--surface-soft) 72%,white),var(--surface));box-shadow:var(--shadow-md)}
.keyword-pills{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--space-lg)}.keyword-pills span{padding:.68rem .92rem;border-radius:var(--radius-pill);background:var(--surface-strong);border:1px solid var(--line);color:var(--title);font-size:.95rem;box-shadow:var(--shadow-sm)}
.price-card{display:flex;flex-direction:column;gap:var(--space-md)}.featured{border-color:rgba(45,110,163,.18);transform:translateY(-6px);box-shadow:0 24px 56px rgba(45,110,163,.14)}
.price{font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:-.05em;font-weight:900;color:var(--title)}.price-row{display:flex;align-items:flex-end;gap:.6rem;flex-wrap:wrap}.price-suffix{font-size:1.15rem;font-weight:700;color:var(--muted)}
.checklist{display:grid;gap:.85rem}.checklist div{display:flex;gap:.75rem;align-items:flex-start;color:var(--title)}.checklist i{width:1.2rem;height:1.2rem;display:inline-grid;place-items:center;border-radius:50%;background:rgba(105,181,135,.16);color:var(--success);font-style:normal;font-size:.75rem;margin-top:.15rem}
.process-grid{grid-template-columns:repeat(4,1fr)}.step{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);border:1px solid rgba(45,110,163,.18);color:var(--accent);font-weight:800;margin-bottom:var(--space-md)}
details{padding:var(--space-md);border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
summary{list-style:none;cursor:pointer;font-weight:700;color:var(--title);display:flex;justify-content:space-between;gap:var(--space-md)}summary::-webkit-details-marker{display:none}details p{padding-top:var(--space-sm)}
.cta-wrap{overflow:hidden}.cta-grid{grid-template-columns:1.05fr .95fr;align-items:center}.cta-form{display:grid;gap:.85rem}
.field{width:100%;padding:1rem;border-radius:16px;border:1px solid var(--line);outline:none;background:var(--surface);color:var(--title);transition:border-color .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.22,1,.36,1),background 1s cubic-bezier(.22,1,.36,1),color 1s cubic-bezier(.22,1,.36,1)}
.field:focus{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-soft) 80%,transparent);transform:translateY(-1px)}.field::placeholder{color:#7c90a8}
.footer{padding:1.5rem 0 3rem;color:var(--muted)}.footer-row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1rem;border-top:1px solid var(--line)}
.reveal{opacity:0;transform:translateY(24px) scale(.985);transition:opacity .95s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1),filter .95s ease;filter:blur(6px)}.reveal.show{opacity:1;transform:none;filter:blur(0)}
@media (max-width:1120px){.hero-grid,.seo-grid,.services-grid,.work-grid,.pricing-grid,.process-grid,.cta-grid,.portfolio-grid{grid-template-columns:1fr 1fr}.trust-grid{grid-template-columns:repeat(2,1fr)}.portfolio-lead{grid-row:auto}.portfolio-metrics{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.section{padding-block:var(--space-2xl)}.hero-grid,.seo-grid,.services-grid,.work-grid,.pricing-grid,.process-grid,.cta-grid,.trust-grid,.portfolio-grid,.portfolio-metrics{grid-template-columns:1fr}.hero-stage{min-height:auto;display:grid;gap:1rem}.hero-photo,.floating-card,.mini-panel{position:relative;inset:auto;width:100%}.hero-photo{min-height:320px}.menu{position:absolute;top:calc(var(--nav-h) + .65rem);left:1rem;right:1rem;display:none;flex-direction:column;border-radius:var(--radius-lg);padding:.7rem;background:color-mix(in srgb,var(--surface-strong) 92%,transparent)}.menu.open{display:flex}.menu a{width:100%}.nav-actions .btn-secondary{display:none}.mobile-toggle{display:inline-flex}.theme-toggle-text{display:none}h1{max-width:10ch}}



/* Header CTA mobile fix */
@media (max-width: 860px) {
  .nav-actions .btn {
    padding: .82rem 1rem;
    font-size: .92rem;
  }

  .nav-actions .btn-primary {
    min-width: auto;
    white-space: nowrap;
  }
}
/* Clean header/menu CTA behavior */
.menu-cta {
  display: none;
}

.header-cta {
  display: inline-flex;
}

@media (max-width: 1024px) {
  .header-cta {
    display: none !important;
  }

  .menu-cta {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
    margin-top: .5rem;
    padding: .95rem 1rem;
  }
}

@media (max-width: 860px) {
  .nav-actions .btn-secondary {
    display: none;
  }

  .header-cta {
    display: none !important;
  }

  .menu-cta {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
  }

  .theme-toggle,
  .mobile-toggle {
    display: inline-flex;
    width: 62px;
    height: 62px;
    padding: 0;
    justify-content: center;
    align-items: center;
    flex: 0 0 62px;
  }
  


  .nav-actions {
    gap: .65rem;
  }
}


.hamburger-icon {
  width: 22px;
  height: 22px;
  display: block;
}
