:root{
    --green:#7dffb0;
    --cyan:#6de8ff;
    --amber:#ffd27d;
    --bg:#04070a;
    --text:#e8f5ee;
    --dim:#8aa49a;
    --line:rgba(232,245,238,.12);
    --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:radial-gradient(ellipse at 50% 30%, #0a1410 0%, var(--bg) 60%);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    overflow-x:hidden;
  }
  ::selection{background:rgba(125,255,176,.25);}
  canvas#gl{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none;}
  .vignette{position:fixed; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.62) 100%);}
  .grain{position:fixed; inset:-50%; width:200%; height:200%; z-index:3; pointer-events:none; opacity:.03;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain .6s steps(4) infinite;}
  @keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-3%,-3%)}100%{transform:translate(2%,2%)}}

  /* ---------- HEADER ---------- */
  #hdr{
    position:fixed; top:0; left:0; right:0; z-index:20;
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 34px;
    transition:background .4s, backdrop-filter .4s;
  }
  #hdr.scrolled{background:rgba(4,7,10,.7); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
  .logo{font-family:var(--mono); font-size:15px; letter-spacing:.35em; font-weight:700; color:var(--text); text-decoration:none;}
  .logo span{color:var(--green);}
  nav.main{display:flex; gap:30px; align-items:center;}
  nav.main a{
    font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--dim); text-decoration:none; transition:color .3s;
  }
  nav.main a:hover{color:var(--green);}
  .nav-pill{
    display:flex; align-items:center; gap:12px;
    border:1px solid rgba(232,245,238,.25); border-radius:999px; padding:9px 20px;
    font-family:var(--mono); font-size:11px; letter-spacing:.2em;
    color:var(--text) !important; text-decoration:none;
    transition:border-color .3s, box-shadow .3s;
  }
  .nav-pill:hover{border-color:var(--green); box-shadow:0 0 24px rgba(125,255,176,.25);}
  .nav-pill .line{width:36px;height:1px;background:linear-gradient(90deg,var(--green),transparent);}

  /* ---------- DOTS ---------- */
  .dots{position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:10; display:flex; flex-direction:column; gap:14px;}
  .dots a{width:7px;height:7px;border-radius:50%;background:rgba(232,245,238,.2);display:block;transition:all .35s;}
  .dots a.on{background:var(--green); box-shadow:0 0 12px var(--green); transform:scale(1.3);}

  /* ---------- LAYOUT ---------- */
  section{position:relative; z-index:5; padding:14vh 8vw;}
  section.full{min-height:100vh; display:flex; flex-direction:column; justify-content:center;}
  .wrap{max-width:1200px; margin:0 auto; width:100%;}

  .kicker{font-family:var(--mono); font-size:11px; letter-spacing:.45em; color:var(--green); margin-bottom:22px; text-transform:uppercase;}
  .kicker.cy{color:var(--cyan);}
  h1,h2{font-weight:800; line-height:1.04; letter-spacing:0; text-transform:uppercase;
    text-shadow:0 2px 24px rgba(4,7,10,.95), 0 0 60px rgba(4,7,10,.8);
    max-width:100%; overflow-wrap:anywhere; hyphens:auto;}
  h1{font-size:clamp(40px,6rem,100px);}
  h2{font-size:clamp(30px,4rem,64px);}
  h3{font-size:18px; letter-spacing:.02em;}
  .sub{margin-top:24px; max-width:560px; color:#b8cfc4; font-size:16px; line-height:1.75;
    text-shadow:0 1px 14px rgba(4,7,10,.95), 0 0 30px rgba(4,7,10,.8);}
  .kicker{text-shadow:0 1px 12px rgba(4,7,10,.95);}
  .stat, .stat b{text-shadow:0 1px 12px rgba(4,7,10,.95);}

  /* dark scrim behind text blocks so particles never wash out the copy */
  .wrap{position:relative;}
  section .wrap::before{
    content:""; position:absolute; inset:-10% -7%; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at 32% 50%, rgba(4,7,10,.92) 0%, rgba(4,7,10,.7) 52%, transparent 80%);
    filter:blur(10px); border-radius:48px;
  }
  section.center .wrap::before{
    inset:-14% -10%;
    background:radial-gradient(ellipse at 50% 50%, rgba(4,7,10,.94) 0%, rgba(4,7,10,.72) 55%, transparent 82%);
  }
  .glow{color:transparent; background:linear-gradient(120deg,#fff 20%, var(--green) 50%, #fff 80%); -webkit-background-clip:text; background-clip:text;}
  .glow-cyan{color:transparent; background:linear-gradient(120deg,#fff 20%, var(--cyan) 50%, #fff 80%); -webkit-background-clip:text; background-clip:text;}

  .reveal{opacity:0; transform:translateY(40px); filter:blur(8px);
    transition:opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1), filter 1s;}
  .reveal.d1{transition-delay:.12s;} .reveal.d2{transition-delay:.24s;} .reveal.d3{transition-delay:.38s;} .reveal.d4{transition-delay:.5s;}
  .vis .reveal{opacity:1; transform:none; filter:none;}

  .stats{display:flex; gap:34px; margin-top:40px; flex-wrap:wrap;}
  .stat{font-family:var(--mono); font-size:12px; letter-spacing:.15em; color:var(--dim);
    border-left:1px solid rgba(125,255,176,.4); padding-left:14px;}
  .stat b{display:block; color:var(--text); font-size:22px; letter-spacing:0; margin-bottom:4px;}

  .cta-btns{display:flex; gap:18px; margin-top:42px; flex-wrap:wrap;}
  .btn{font-family:var(--mono); font-size:12px; letter-spacing:.25em; text-transform:uppercase; text-decoration:none;
    padding:16px 34px; border-radius:999px; transition:all .35s; display:inline-block;}
  .btn-primary{color:#04140b; background:var(--green); font-weight:700; box-shadow:0 0 30px rgba(125,255,176,.35);}
  .btn-primary:hover{box-shadow:0 0 60px rgba(125,255,176,.6); transform:translateY(-2px);}
  .btn-ghost{color:var(--text); border:1px solid rgba(232,245,238,.3);}
  .btn-ghost:hover{border-color:var(--green); color:var(--green);}

  .scroll-hint{position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
    font-family:var(--mono); font-size:10px; letter-spacing:.4em; color:var(--dim);
    display:flex; flex-direction:column; align-items:center; gap:10px;}
  .scroll-hint .bar{width:1px; height:44px; overflow:hidden; background:rgba(232,245,238,.12); position:relative;}
  .scroll-hint .bar::after{content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
    background:linear-gradient(180deg,transparent,var(--green)); animation:drop 1.8s cubic-bezier(.6,0,.3,1) infinite;}
  @keyframes drop{to{top:100%;}}

  /* ---------- TECH MARQUEE ---------- */
  .marquee{position:relative; z-index:5; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    overflow:hidden; padding:22px 0; background:rgba(4,7,10,.35); backdrop-filter:blur(4px);}
  .marquee .track{display:flex; gap:64px; width:max-content; animation:scrollx 30s linear infinite;}
  @keyframes scrollx{to{transform:translateX(-50%);}}
  .marquee span{font-family:var(--mono); font-size:13px; letter-spacing:.3em; color:var(--dim); text-transform:uppercase; white-space:nowrap;}
  .marquee span b{color:var(--text); font-weight:600;}
  .marquee .marquee-logo{display:flex; align-items:center; justify-content:center; min-width:110px;}
  .marquee .marquee-logo img{display:block; width:auto; max-width:120px; max-height:38px; object-fit:contain;}
  .hero-logo-strip .track,
  .static-logo-strip .track{width:100%; justify-content:center; gap:clamp(28px,6vw,72px); animation:none;}

  /* ---------- SERVICE CARDS ---------- */
  .grid4{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:50px;}
  .scard{
    border:1px solid rgba(109,232,255,.15);
    background:linear-gradient(160deg, rgba(109,232,255,.05), rgba(4,7,10,.72));
    backdrop-filter:blur(8px); border-radius:16px; padding:30px 28px;
    transition:transform .4s, border-color .4s, box-shadow .4s;
  }
  .scard:hover{transform:translateY(-6px); border-color:var(--cyan); box-shadow:0 12px 44px rgba(109,232,255,.12);}
  .scard .num{font-family:var(--mono); font-size:10px; color:var(--cyan); letter-spacing:.3em;}
  .scard h3{margin:14px 0 12px; color:var(--text);}
  .scard p{color:var(--dim); font-size:14px; line-height:1.7;}
  .scard a{display:inline-block; margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.2em;
    color:var(--cyan); text-decoration:none; text-transform:uppercase;}
  .scard a:hover{text-decoration:underline;}

  /* ---------- PROJECTS ---------- */
  .projects{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:24px; margin-top:50px;}
  .pcard{
    border:1px solid rgba(125,255,176,.15); border-radius:18px; overflow:hidden;
    background:linear-gradient(170deg, rgba(125,255,176,.05), rgba(4,7,10,.75));
    backdrop-filter:blur(8px); padding:34px 32px;
    transition:transform .4s, border-color .4s, box-shadow .4s;
  }
  .pcard:hover{transform:translateY(-6px); border-color:var(--green); box-shadow:0 14px 50px rgba(125,255,176,.12);}
  .pcard-media{margin:-34px -32px 26px; aspect-ratio:16/9; border-bottom:1px solid rgba(125,255,176,.15); background:rgba(4,7,10,.45); overflow:hidden;}
  .pcard-media img{display:block; width:100%; height:100%; object-fit:cover;}
  .pcard .tag{font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--green);
    border:1px solid rgba(125,255,176,.3); border-radius:999px; padding:6px 14px; display:inline-block;}
  .pcard h3{font-size:24px; margin:20px 0 12px; text-transform:uppercase; letter-spacing:.01em;}
  .pcard p{color:var(--dim); font-size:14px; line-height:1.7;}
  .pcard .pstats{display:flex; gap:22px; margin-top:24px; flex-wrap:wrap;}
  .pcard .pstats div{font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.1em;}
  .pcard .pstats b{display:block; color:var(--green); font-size:18px; margin-bottom:3px;}
  .pcard a.plink{display:inline-block; margin-top:24px; font-family:var(--mono); font-size:11px;
    letter-spacing:.2em; color:var(--text); text-decoration:none; text-transform:uppercase;
    border-bottom:1px solid var(--green); padding-bottom:3px;}
  .pcard a.plink:hover{color:var(--green);}

  /* ---------- PROCESS ---------- */
  .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:50px; counter-reset:step;}
  .step{position:relative; padding:28px 24px; border-top:1px solid var(--line);}
  .step .n{font-family:var(--mono); font-size:36px; font-weight:700; color:transparent;
    -webkit-text-stroke:1px rgba(125,255,176,.5);}
  .step h3{margin:16px 0 10px;}
  .step p{color:var(--dim); font-size:14px; line-height:1.7;}

  /* ---------- USP ---------- */
  .usps{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:50px;}
  .usp{padding:30px 26px; border:1px solid var(--line); border-radius:16px; background:rgba(4,7,10,.65); backdrop-filter:blur(6px);}
  .usp .ic{width:38px;height:38px;border-radius:10px; display:flex;align-items:center;justify-content:center;
    background:rgba(125,255,176,.1); color:var(--green); font-size:18px; margin-bottom:18px;
    font-family:var(--mono);}
  .usp h3{margin-bottom:10px;}
  .usp p{color:var(--dim); font-size:14px; line-height:1.7;}

  /* ---------- FAQ ---------- */
  .faq{max-width:820px; margin-top:50px;
    background:rgba(4,7,10,.7); backdrop-filter:blur(10px);
    border:1px solid var(--line); border-radius:18px; padding:6px 30px;}
  .faq details{border-bottom:1px solid var(--line);}
  .faq details:last-child{border-bottom:none;}
  .faq summary{
    cursor:pointer; list-style:none; padding:24px 0;
    display:flex; justify-content:space-between; align-items:center; gap:20px;
    font-size:17px; font-weight:600; transition:color .3s;
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+"; font-family:var(--mono); color:var(--green); font-size:22px; transition:transform .3s;}
  .faq details[open] summary{color:var(--green);}
  .faq details[open] summary::after{transform:rotate(45deg);}
  .faq .a{padding:0 0 26px; color:var(--dim); font-size:15px; line-height:1.8; max-width:680px;}

  /* ---------- BLOG ---------- */
  .blog{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:50px;}
  .bcard{border:1px solid var(--line); border-radius:16px; padding:28px 26px;
    background:rgba(4,7,10,.65); backdrop-filter:blur(6px); transition:transform .4s, border-color .4s; display:block; text-decoration:none; overflow:hidden;}
  .bcard:hover{transform:translateY(-6px); border-color:var(--green);}
  .bcard-media{display:block; margin:-28px -26px 22px; aspect-ratio:16/9; border-bottom:1px solid var(--line); background:rgba(4,7,10,.45); overflow:hidden;}
  .bcard-media img{display:block; width:100%; height:100%; object-fit:cover;}
  .bcard .cat{font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--cyan);}
  .bcard h3{margin:16px 0 12px; color:var(--text); font-size:17px; line-height:1.45;}
  .bcard time{font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.1em;}

  /* ---------- BLOG EXTENSION ---------- */
  .page-11 .site-main{padding-top:118px;}
  .page-11 .frame-type-header{padding-top:0; padding-bottom:4vh;}
  .page-11 .frame-type-header h1{font-size:clamp(44px,8vw,92px);}
  .page-11 .frame-type-blog_posts{padding-top:4vh;}
  .page-11 .frame-type-blog_posts > *{max-width:1200px; width:100%;}
  .blogcontainer{max-width:1200px; margin:0 auto; width:100%;}
  .blogcontainer-sidebar{display:none;}
  .postteaser,
  .postlist,
  .bloglist{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; align-items:stretch;}
  .postteaser__post,
  .postlist__post{
    border:1px solid var(--line); border-radius:16px; overflow:hidden;
    background:linear-gradient(170deg, rgba(109,232,255,.05), rgba(4,7,10,.76));
    backdrop-filter:blur(8px); padding:28px 26px;
    transition:transform .4s, border-color .4s, box-shadow .4s;
  }
  .postteaser__post:hover,
  .postlist__post:hover{transform:translateY(-6px); border-color:rgba(109,232,255,.38); box-shadow:0 14px 50px rgba(109,232,255,.1);}
  .postteaser__featuredimage,
  .postlist__featuredimage{display:block; margin:-28px -26px 22px; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line); background:rgba(4,7,10,.45);}
  .blogimage{margin:0; width:100%; height:100%;}
  .blogimage img{display:block; width:100%; height:100%; object-fit:cover;}
  .postteaser__posttitle,
  .postlist__posttitle{font-size:20px; line-height:1.35; margin:0 0 12px; text-transform:none; letter-spacing:0;}
  .postteaser__posttitle a,
  .postlist__posttitle a{color:var(--text); text-decoration:none; transition:color .25s;}
  .postteaser__posttitle a:hover,
  .postlist__posttitle a:hover{color:var(--cyan);}
  .postteaser__postdescription,
  .postlist__postdescription{color:var(--dim); font-size:14px; line-height:1.7; margin:0;}
  .postmetagroup{display:flex; gap:12px; flex-wrap:wrap; margin:0 0 14px;}
  .postmetagroup__item{font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--dim); text-transform:uppercase;}
  .postmetagroup__prefix,
  .postmetagroup__icon{display:none;}
  .postmetagroup__content a,
  .postmetagroup__content time{color:var(--cyan); text-decoration:none;}
  .postheader{max-width:980px; margin:0 auto; padding:10vh 8vw 5vh;}
  .postheader__featuredimage{border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:0 0 34px; aspect-ratio:16/9;}
  .postheader__title{font-size:clamp(34px,6vw,76px); margin:0 0 22px;}
  .page-type-137 .site-main{padding-top:112px;}
  .page-type-137 .frame-type-image{padding:0 8vw 4vh;}
  .page-type-137 .frame-type-header{padding:3vh 8vw 2vh;}
  .page-type-137 .frame-type-text{padding:4vh 8vw 11vh;}
  .page-type-137 .frame-type-image > *,
  .page-type-137 .frame-type-header > *{max-width:920px;}
  .page-type-137 .frame-type-text > *{max-width:760px;}
  .page-type-137 .frame-type-image .ce-gallery,
  .page-type-137 .frame-type-image .ce-image{width:100%; max-width:920px;}
  .page-type-137 .frame-type-image .ce-outer,
  .page-type-137 .frame-type-image .ce-inner,
  .page-type-137 .frame-type-image .ce-column{
    float:none; position:static; left:auto; right:auto; width:100% !important;
  }
  .page-type-137 .frame-type-image figure{display:block; width:100% !important; margin:0;}
  .page-type-137 .frame-type-image img{
    display:block; width:100%; height:auto; border-radius:16px;
    border:1px solid var(--line); box-shadow:0 24px 70px rgba(0,0,0,.34);
  }
  .page-type-137 .frame-type-image figcaption{
    display:block; width:100%; margin-top:12px; color:var(--dim);
    font-size:13px; line-height:1.5;
  }
  .page-type-137 .frame-type-header h1{
    max-width:920px; font-size:clamp(38px,6vw,74px); line-height:1.06;
    margin:0; text-wrap:balance;
  }
  .page-type-137 .frame-type-text h2{
    max-width:760px; font-size:clamp(28px,3.5vw,46px); line-height:1.12;
    margin:64px auto 22px; text-wrap:balance;
  }
  .page-type-137 .frame-type-text p,
  .page-type-137 .frame-type-text li{
    color:#a9bbb4; font-size:17px; line-height:1.9;
  }
  .page-type-137 .frame-type-text p + p{margin-top:22px;}
  .page-type-137 .frame-type-text ul,
  .page-type-137 .frame-type-text ol{max-width:760px; margin:22px auto 30px; padding-left:24px;}
  @media (max-width:640px){
    .page-type-137 .site-main{padding-top:92px;}
    .page-type-137 .frame-type-image{padding:0 6vw 3vh;}
    .page-type-137 .frame-type-header{padding:3vh 6vw 1vh;}
    .page-type-137 .frame-type-text{padding:3vh 6vw 10vh;}
    .page-type-137 .frame-type-header h1{font-size:clamp(34px,11vw,48px);}
    .page-type-137 .frame-type-text h2{font-size:clamp(26px,8vw,36px); margin-top:48px;}
    .page-type-137 .frame-type-text p,
    .page-type-137 .frame-type-text li{font-size:15px;}
  }

  /* ---------- SEO TEXT ---------- */
  .seotext{max-width:780px; margin-top:46px; color:var(--dim); font-size:15px; line-height:1.85;}
  .seotext h3{color:var(--text); margin:34px 0 12px; font-size:19px;}
  .seotext strong{color:var(--text); font-weight:600;}
  .seotext a{color:var(--green); text-decoration:none;}
  .seotext a:hover{text-decoration:underline;}

  /* ---------- FOOTER ---------- */
  footer{position:relative; z-index:5; border-top:1px solid var(--line); background:rgba(4,7,10,.7); backdrop-filter:blur(10px);
    padding:70px 8vw 40px;}
  .fgrid{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;}
  footer h4{font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--text); text-transform:uppercase; margin-bottom:18px;}
  footer p{color:var(--dim); font-size:14px; line-height:1.7; max-width:300px;}
  footer ul{list-style:none;}
  footer li{margin-bottom:10px;}
  footer a{color:var(--dim); font-size:14px; text-decoration:none; transition:color .3s;}
  footer a:hover{color:var(--green);}
  .fbottom{max-width:1200px; margin:50px auto 0; padding-top:24px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
    font-family:var(--mono); font-size:11px; letter-spacing:.15em; color:rgba(138,164,154,.6);}

  .center{align-items:center; text-align:center;}
  .center .sub{margin-left:auto; margin-right:auto;}
  .center .cta-btns{justify-content:center;}

  @media (max-width:900px){
    nav.main a:not(.nav-pill){display:none;}
    .fgrid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:640px){
    .dots{display:none;}
    section{padding:12vh 6vw;}
    h1{font-size:40px; line-height:1.08;}
    h2{font-size:32px; line-height:1.12;}
    h3{overflow-wrap:anywhere; hyphens:auto;}
    .kicker{letter-spacing:.28em;}
    .btn{width:100%; max-width:360px; text-align:center; padding-left:22px; padding-right:22px; white-space:normal;}
    .projects,.blog{grid-template-columns:1fr;}
    .pcard h3{font-size:21px; line-height:1.2; overflow-wrap:anywhere; hyphens:auto;}
    .bcard h3{overflow-wrap:anywhere; hyphens:auto;}
  }
  @media (max-width:380px){
    h1{font-size:34px;}
    h2{font-size:28px;}
    .kicker{letter-spacing:.18em;}
  }
  @media (prefers-reduced-motion: reduce){
    .grain{animation:none;}
    .reveal{transition:none; opacity:1; transform:none; filter:none;}
  }

/* ---------- SUBPAGE HERO ---------- */
body.subpage{background:var(--bg);}
.hero{position:relative; min-height:68vh; display:flex; align-items:flex-end;
  padding:150px 8vw 64px; overflow:hidden; border-bottom:1px solid var(--line); z-index:5;}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
.hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,7,10,.30) 0%, rgba(4,7,10,.55) 55%, var(--bg) 100%);}
.hero .wrap{position:relative; z-index:2;}
.hero .wrap::before{display:none;}
.hero h1{font-size:clamp(34px,4.75rem,76px);}
.crumbs{font-family:var(--mono); font-size:10px; letter-spacing:.25em; color:var(--dim);
  margin-bottom:18px; text-transform:uppercase;}
.crumbs a{color:var(--dim); text-decoration:none;}
.crumbs a:hover{color:var(--green);}
.checks{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px;}
.checks span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--text);
  border:1px solid rgba(125,255,176,.25); border-radius:999px; padding:8px 16px;
  background:rgba(4,7,10,.55);}
.checks span::before{content:"\2713  "; color:var(--green);}
nav.main a.active{color:var(--green);}
.scard ul{list-style:none; margin-top:14px;}
.scard ul li{color:var(--dim); font-size:13px; line-height:1.9; padding-left:16px; position:relative;}
.scard ul li::before{content:"\2192"; position:absolute; left:0; color:var(--cyan); font-size:11px;}
.demo-links{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;}
.demo-links a{font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; padding:11px 20px; border-radius:999px; transition:all .3s;}
.demo-links a.f{color:#04140b; background:var(--green); font-weight:700;}
.demo-links a.f:hover{box-shadow:0 0 30px rgba(125,255,176,.45);}
.demo-links a.b{color:var(--text); border:1px solid rgba(232,245,238,.3);}
.demo-links a.b:hover{border-color:var(--green); color:var(--green);}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:46px;}
.ccard{border:1px solid var(--line); border-radius:16px; padding:26px 24px;
  background:rgba(4,7,10,.65); backdrop-filter:blur(6px);}
.ccard .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--green); text-transform:uppercase;}
.ccard p, .ccard a{display:block; margin-top:12px; color:var(--text); font-size:16px; text-decoration:none;}
.ccard a:hover{color:var(--green);}
.cform{max-width:640px; margin-top:44px; display:grid; gap:16px;}
.cform form{display:grid; gap:16px;}
.cform .form-group{display:grid; gap:8px;}
.cform label{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);}
.cform input,.cform textarea,.cform select{width:100%; background:rgba(4,7,10,.7); border:1px solid var(--line);
  border-radius:12px; padding:16px 18px; color:var(--text); font-size:15px;
  font-family:inherit; outline:none; transition:border-color .3s;}
.cform input:focus,.cform textarea:focus,.cform select:focus{border-color:var(--green);}
.cform textarea{min-height:140px; resize:vertical;}
.cform .note{font-family:var(--mono); font-size:10px; letter-spacing:.15em; color:var(--dim);}
.cform .actions{margin-top:4px;}
.cform button,.cform input[type="submit"]{font-family:var(--mono); font-size:12px; letter-spacing:.25em; text-transform:uppercase;
  padding:16px 34px; border-radius:999px; border:none; color:#04140b; background:var(--green); font-weight:700;
  cursor:pointer; box-shadow:0 0 30px rgba(125,255,176,.35);}
.cform input[type="checkbox"]{width:auto; min-width:18px; height:18px; accent-color:var(--green); padding:0;}
.cform .form-check,.cform .form-check .form-group{display:flex; gap:12px; align-items:flex-start;}
.cform .error,.cform .form-text{color:var(--amber); font-size:13px; line-height:1.5;}
section.band{padding:10vh 8vw;}

@media (max-width:640px){
  .hero{min-height:62vh; padding:118px 6vw 48px;}
  .hero h1{font-size:38px; line-height:1.08;}
  .sub{font-size:15px; line-height:1.7;}
  .page-1 .site-main > .hero:first-child{padding-top:112px;}
  .frame-type-text,
  .frame-type-header,
  .frame-type-image,
  .frame-type-textmedia,
  .frame-type-blog_posts,
  .frame-type-form_formframework{padding:8vh 6vw;}
  .frame-type-text h1,
  .frame-type-header h1,
  .page-11 .frame-type-header h1,
  .postheader__title,
  .page-type-137 .frame-type-header h1{font-size:36px; line-height:1.1;}
  .frame-type-text h2,
  .frame-type-header h2,
  .page-type-137 .frame-type-text h2{font-size:29px; line-height:1.15;}
}
@media (max-width:380px){
  .hero h1,
  .frame-type-text h1,
  .frame-type-header h1,
  .page-11 .frame-type-header h1,
  .postheader__title,
  .page-type-137 .frame-type-header h1{font-size:32px;}
  .frame-type-text h2,
  .frame-type-header h2,
  .page-type-137 .frame-type-text h2{font-size:26px;}
}

/* ---------- 2-LEVEL NAVIGATION ---------- */
nav.main{gap:6px;}
.nav-item{position:relative;}
.nav-top{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim); text-decoration:none;
  padding:10px 12px; transition:color .3s;}
.nav-item:hover .nav-top, .nav-item.active .nav-top{color:var(--green);}
.car{font-style:normal; font-size:9px; color:var(--dim); transition:transform .3s, color .3s;
  padding:4px; margin:-4px;}
.nav-item:hover .car{transform:rotate(180deg); color:var(--green);}
.drop{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(10px);
  min-width:280px; background:rgba(4,7,10,.94); border:1px solid var(--line); border-radius:16px;
  backdrop-filter:blur(16px); padding:10px; opacity:0; visibility:hidden;
  transition:opacity .25s, transform .25s, visibility .25s;
  box-shadow:0 20px 60px rgba(0,0,0,.5);}
.drop::before{content:""; position:absolute; top:-14px; left:0; right:0; height:14px;}
.nav-item:hover .drop, .nav-item:focus-within .drop{opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(0);}
.drop a{display:block; padding:12px 14px; border-radius:10px; text-decoration:none; transition:background .25s;}
.drop a b{display:block; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:13px; font-weight:600; color:var(--text); letter-spacing:.02em; text-transform:none;}
.drop a small{display:block; margin-top:3px; font-family:var(--mono); font-size:9px;
  letter-spacing:.18em; color:var(--dim); text-transform:uppercase;}
.drop a:hover{background:rgba(125,255,176,.08);}
.drop a:hover b{color:var(--green);}
.drop a.all{font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--green);
  text-transform:uppercase; border-top:1px solid var(--line); border-radius:0;
  margin-top:6px; padding-top:14px;}
.burger{display:none; z-index:31; background:none; border:1px solid var(--line); border-radius:10px;
  width:44px; height:40px; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; cursor:pointer;}
.burger span{display:block; width:18px; height:1.5px; background:var(--text); transition:.3s;}
body.nav-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
body.nav-open .burger span:nth-child(2){opacity:0;}
body.nav-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
@media (max-width:900px){
  body.nav-open{overflow:hidden;}
  nav.main a:not(.nav-pill){display:block;}
  .burger{display:flex;}
  nav.main{position:fixed; inset:0; z-index:30; height:100vh; height:100dvh; background:#04070a;
    backdrop-filter:blur(18px); flex-direction:column; align-items:flex-start;
    padding:110px 8vw 50px; gap:2px; transform:translateY(-102%);
    transition:transform .45s cubic-bezier(.2,.6,.2,1); overflow:auto;
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
  body.nav-open nav.main{transform:none;}
  .nav-item{width:100%; border-bottom:1px solid var(--line);}
  .nav-top{font-size:14px; padding:16px 0; width:100%; justify-content:space-between;}
  .car{font-size:12px; padding:10px; margin:-10px;}
  .drop{position:static; transform:none; opacity:1; visibility:visible; min-width:0;
    background:transparent; border:none; backdrop-filter:none; box-shadow:none;
    padding:0 0 10px 14px; display:none; transition:none;}
  .nav-item:hover .drop, .nav-item:focus-within .drop{transform:none;}
  .nav-item.open .drop{display:block;}
  .nav-item.open .car{transform:rotate(180deg);}
  .nav-pill{margin-top:22px;}
}

/* ---------- TYPO3 INTEGRATION ---------- */
.page:not(.page-1) > #gl,
.page:not(.page-1) > .dots{display:none;}
.page-1 .site-main canvas[data-shape]{display:none;}
.site-main{position:relative; z-index:5;}
.page-1 .site-main > .hero:first-child{min-height:100vh; align-items:center; padding-top:130px;}
.page-1 .site-main > .hero:first-child .crumbs{display:none;}
.hero .sub p,
.band .sub p{margin:0;}
.scard p + ul{margin-top:14px;}
.pcard p,
.pcard .ce-bodytext p{color:var(--dim); font-size:14px; line-height:1.7;}
.frame-type-text,
.frame-type-header,
.frame-type-image,
.frame-type-textmedia,
.frame-type-blog_posts,
.frame-type-form_formframework{
  position:relative; z-index:5; padding:10vh 8vw;
}
.frame-type-text > *,
.frame-type-header > *,
.frame-type-image > *,
.frame-type-textmedia > *,
.frame-type-blog_posts > *,
.frame-type-form_formframework > *{
  max-width:980px; margin-left:auto; margin-right:auto;
}
.frame-type-text h1,
.frame-type-text h2,
.frame-type-header h1,
.frame-type-header h2{margin:0 0 22px;}
.frame-type-text h2{font-size:clamp(26px,3rem,44px); margin-top:42px;}
.frame-type-text p,
.frame-type-text li,
.frame-type-textmedia p,
.frame-type-textmedia li{color:var(--dim); font-size:16px; line-height:1.85;}
.frame-type-text p + p{margin-top:18px;}
.frame-type-text ul,
.frame-type-text ol{padding-left:22px; margin:20px auto;}
.frame-type-text a,
.frame-type-textmedia a{color:var(--green); text-decoration:none;}
.frame-type-text a:hover,
.frame-type-textmedia a:hover{text-decoration:underline;}
.frame-type-form_formframework h2,
.frame-type-form_formframework legend{color:var(--text); font-size:24px; margin-bottom:18px;}
.frame-type-form_formframework form{max-width:640px; display:grid; gap:16px;}
.frame-type-form_formframework .form-group{display:grid; gap:8px;}
.frame-type-form_formframework label{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);}
.frame-type-form_formframework input,
.frame-type-form_formframework textarea,
.frame-type-form_formframework select{
  width:100%; background:rgba(4,7,10,.7); border:1px solid var(--line);
  border-radius:12px; padding:16px 18px; color:var(--text); font-size:15px;
  font-family:inherit; outline:none; transition:border-color .3s;
}
.frame-type-form_formframework input:focus,
.frame-type-form_formframework textarea:focus,
.frame-type-form_formframework select:focus{border-color:var(--green);}
.frame-type-form_formframework textarea{min-height:140px; resize:vertical;}
.frame-type-form_formframework button,
.frame-type-form_formframework input[type="submit"]{
  font-family:var(--mono); font-size:12px; letter-spacing:.25em; text-transform:uppercase;
  padding:16px 34px; border-radius:999px; border:none; color:#04140b;
  background:var(--green); font-weight:700; cursor:pointer;
  box-shadow:0 0 30px rgba(125,255,176,.35);
}

@media (max-width:640px){
  .page-1 .site-main > .hero:first-child{padding-top:112px;}
  .frame-type-text,
  .frame-type-header,
  .frame-type-image,
  .frame-type-textmedia,
  .frame-type-blog_posts,
  .frame-type-form_formframework{padding:8vh 6vw;}
  .frame-type-text h1,
  .frame-type-header h1,
  .page-11 .frame-type-header h1,
  .postheader__title,
  .page-type-137 .frame-type-header h1{font-size:36px; line-height:1.1;}
  .frame-type-text h2,
  .frame-type-header h2,
  .page-type-137 .frame-type-text h2{font-size:29px; line-height:1.15;}
}

@media (max-width:380px){
  .hero h1,
  .frame-type-text h1,
  .frame-type-header h1,
  .page-11 .frame-type-header h1,
  .postheader__title,
  .page-type-137 .frame-type-header h1{font-size:32px;}
  .frame-type-text h2,
  .frame-type-header h2,
  .page-type-137 .frame-type-text h2{font-size:26px;}
}