/* ═══════════════════════════════════════
   SWYZE WEBSITE – SHARED STYLES
   Used by all pages
═══════════════════════════════════════ */

/* RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;max-width:100vw;width:100%}
body{
  background:var(--bg);color:var(--w);
  font-family:'Syne',sans-serif;
  overflow-x:hidden;
  overflow-x:clip;
  max-width:100vw;
  width:100%;
  min-height:100vh;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* DESIGN TOKENS */
:root{
  --bg:#06050f;
  --s1:#13102a;                   /* slightly brighter card bg */
  --s2:#1c1745;                   /* slightly brighter hover bg */
  --bd:rgba(168,85,247,.22);     /* slightly stronger borders */
  --v:#7c3aed;
  --vb:#a855f7;
  --vg:#c084fc;
  --vd:#4c1d95;
  --pk:#ec4899;
  --gold:#d4b96a;
  --gold-bright:#f4d99a;
  --w:#f5f1ff;                    /* brighter white for max contrast */
  --m:#a89dc4;                    /* muted text – BIG contrast bump from #6b5f8a */
  --m2:#3a2f5e;                   /* slightly brighter for stripes/lines */
  --mono:'Space Mono',monospace;

  --pad-x:5rem;
  --pad-y:11rem;

  --tr:cubic-bezier(.19,1,.22,1);
  --tr-spring:cubic-bezier(.34,1.56,.64,1);
}

/* TYPOGRAPHY CONTRAST BOOST – body text must always be readable */
.tc-quote, .col-body, .feat-body, .svc-body, .tl-body, .sbody,
.csub, .cta-sub, .form-sub, .form-note, .nl-left p, .hdesc, .hero-sub,
.left-body, .vsub, .contact-intro-body{
  color:#d8cee9;
}
.tc-quote{color:#f3edff;font-weight:400;font-style:normal;font-size:1.08rem;line-height:1.85}
.tl-body{color:#dccfee;font-size:.92rem;line-height:1.95}
.feat-body, .svc-body{color:#dfd4ee;font-size:.95rem;line-height:1.8}
.sbody, .col-body{color:#dfd4ee;font-size:.98rem;line-height:1.95}
.cta-sub, .vsub{font-size:1rem;color:#dccfee;line-height:1.85}
.hdesc, .hero-sub, .left-body{font-size:1.05rem;line-height:1.85;color:#dfd4ee}

/* Mono accent labels lighter for legibility */
.mqi, .nlinks a, .flinks a, .hscroll-l, .hcard-role, .tc-role,
.fpl, .sbl, .feat-arr, .ls-l, .sstat-l, .skname{
  color:#c4b6dd;
}
.tc-role{font-size:.74rem;color:#cebee2}
.feat-idx, .svc-idx{font-size:.76rem;color:var(--vg);font-weight:700}
.sstat-l{font-size:.78rem;color:#c4b6dd}
.sbl, .ls-l{font-size:.74rem}
.ctype{font-size:.7rem}
.cval{font-size:1.05rem}
.contact-intro-body, .csub{font-size:.96rem;line-height:1.95;color:#dccfee}
.form-sub, .form-note{color:#c4b6dd;font-size:.86rem}
.nl-left p{font-size:.88rem;color:#c4b6dd}
.tl-yr{font-size:.74rem;letter-spacing:.18em;font-weight:700}
.skname{font-size:.82rem}
.skpct{font-size:1.05rem}
.hscroll-l{font-size:.65rem}

/* Bump headline secondary sizes */
.feat-title{font-size:1.6rem}
.svc-title{font-size:1.6rem}
.tl-title{font-size:1.4rem}
.tc-name{font-size:1.1rem}
.hcard-name{font-size:1.9rem}

/* ════════════════════════════════════════════════════════════════
   UNIVERSAL DESCENDER FIX (Safari + all browsers)
   Brutal but works: every headline + every gradient span gets
   generous padding + relaxed line-height. No exceptions.
   ════════════════════════════════════════════════════════════════ */

/* Every section container must allow overflow */
section, h1, h2, h3, h4, h5, p, span,
.features, .proof, .screenshot-sec, .testi, .services, .skillsec,
.tl-sec, .vision, .contact, .story, .cta-block, .form-section,
.contact-wrap, .anmelde-cta, .main, .hero, .sec, .sec-large,
.two-col, .sec-head, .features-intro, .intro-wrap, .showcase,
.formats, .faq-sec, .process, .features-title, .intro-title{
  overflow:visible !important;
}

/* All large headlines: massive line-height + padding */
h1, h2, h3,
.hh1, .hero-h1, .page-hero-h1, .left-title, .stitle, .vh, .cta-h,
.sec-hl, .col-title, .chl, .feat-title, .svc-title, .tc-name,
.tl-title, .form-title, .hcard-name, .features-title, .intro-title,
.proof-left h2, .screenshot-sec h2, .showcase h2, .faq-left h2{
  padding-bottom:.4em !important;
  line-height:1.2 !important;
}

/* Every gradient span (block OR inline) gets explicit display + padding */
.hh1 > span, .hero-h1 > span, .page-hero-h1 > span,
.left-title > span, .stitle > span,
.vh > span, .cta-h > span,
.sec-hl > span, .col-title > span, .chl > span,
.features-title > span, .intro-title > span,
.proof-left h2 > span, .screenshot-sec h2 > span,
.showcase h2 > span, .faq-left h2 > span,
.line, .l1, .l2, .l3, .gr, .wh, .ou, .vi, .gd, .grad, .accent, .st{
  padding:0 .12em .35em !important;
  line-height:1.25 !important;
  overflow:visible !important;
}

/* Block-style headline lines (stacked layout) */
.hh1 .line, .hero-h1 .line, .page-hero-h1 .line,
.vh .wh, .vh .gr, .vh .ou,
.cta-h .wh, .cta-h .gr, .cta-h .ou,
.hh1 .wh, .hh1 .gr, .hh1 .ou,
.hero-h1 .l1, .hero-h1 .l2, .hero-h1 .l3{
  display:block !important;
}

.tl-bignum{padding-bottom:.4em !important;line-height:1.2 !important;overflow:visible !important}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* CURSOR (desktop only) */
#c1{position:fixed;width:10px;height:10px;border-radius:50%;background:var(--vb);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .3s;mix-blend-mode:exclusion;will-change:transform,left,top;display:none}
#c2{position:fixed;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(168,85,247,.4);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:left .11s ease-out,top .11s ease-out,width .3s,height .3s,border-color .3s;will-change:transform,left,top;display:none}
@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  #c1,#c2{display:block}
  body.hov #c1{width:18px;height:18px}
  body.hov #c2{width:68px;height:68px;border-color:rgba(192,132,252,.7)}
  body.clk #c1{transform:translate(-50%,-50%) scale(.65)}
}

/* GRAIN */
body::after{
  content:'';position:fixed;inset:0;z-index:9990;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity:.028;animation:grain .14s steps(1) infinite;
}
@keyframes grain{0%{background-position:0 0}25%{background-position:-55px 20px}50%{background-position:30px -45px}75%{background-position:-20px 50px}}

/* CANVAS */
#bgc{position:fixed;inset:0;z-index:0;pointer-events:none;will-change:transform}

/* ─── NAV ─── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem 5rem;
  transition:background .5s,backdrop-filter .5s,border-bottom .5s,padding .3s;
}
nav.sc{
  background:rgba(6,5,15,.93);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--bd);
  padding:1rem 5rem;
}
.nlogo{text-decoration:none;display:flex;align-items:center;gap:8px;flex-shrink:0}
.nlogo img{height:34px;width:auto;filter:brightness(1.1) drop-shadow(0 0 14px rgba(168,85,247,.18));transition:filter .35s,transform .35s}
.nlogo:hover img{filter:brightness(1.25) drop-shadow(0 0 18px rgba(212,185,106,.35));transform:scale(1.04)}

.nright{display:flex;align-items:center;gap:2.5rem}
.nlinks{list-style:none;display:flex;gap:2rem}
.nlinks a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--m);text-decoration:none;
  transition:color .3s;position:relative;padding:.3rem 0;
}
.nlinks a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
  background:linear-gradient(90deg,var(--vg),var(--gold));transition:width .35s;
}
.nlinks a:hover,.nlinks a.active{color:var(--vg)}
.nlinks a:hover::after,.nlinks a.active::after{width:100%}
.nbtn{
  padding:.6rem 1.6rem;border:1.5px solid var(--v);color:var(--vg);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;
  transition:color .35s,border-color .35s;
  position:relative;overflow:hidden;flex-shrink:0;
}
.nbtn span{position:relative;z-index:1}
.nbtn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--v),var(--pk));
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.77,0,.175,1);
}
.nbtn:hover{color:var(--w);border-color:transparent}
.nbtn:hover::before{transform:scaleX(1)}

/* MOBILE NAV TOGGLE */
.nav-toggle{display:none;flex-shrink:0;background:none;border:0;width:36px;height:36px;cursor:pointer;color:var(--w);padding:0;align-items:center;justify-content:center;position:relative;z-index:600}
.nav-toggle span{position:absolute;left:8px;width:20px;height:1.5px;background:var(--vg);transition:transform .35s,opacity .35s,top .35s}
.nav-toggle span:nth-child(1){top:13px}
.nav-toggle span:nth-child(2){top:18px}
.nav-toggle span:nth-child(3){top:23px}
.nav-toggle.open span:nth-child(1){top:18px;transform:rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){top:18px;transform:rotate(-45deg)}

/* ─── BUTTONS ─── */
.bmain{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1rem 2.4rem;
  background:linear-gradient(135deg,var(--v),var(--pk));
  color:var(--w);font-weight:800;font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;
  position:relative;overflow:hidden;
  transition:transform .4s var(--tr),box-shadow .4s;
  border:none;cursor:pointer;font-family:'Syne',sans-serif;
}
.bmain::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--pk),var(--vb));opacity:0;transition:opacity .4s}
.bmain:hover{transform:translateY(-5px);box-shadow:0 25px 65px rgba(124,58,237,.4)}
.bmain:hover::before{opacity:1}
.bmain span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5rem}
.bghost{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--m);text-decoration:none;
  border-bottom:1px solid var(--m2);padding-bottom:.2rem;
  transition:color .35s,border-color .35s;display:inline-block;
}
.bghost:hover{color:var(--gold);border-color:var(--gold)}

/* SCROLL HINT */
.hscroll{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:0;animation:fadeIn 1s ease 1.5s both;z-index:5;pointer-events:none}
.smouse{width:22px;height:34px;border:1.5px solid var(--m2);border-radius:11px;display:flex;justify-content:center;padding-top:6px}
.swheel{width:3px;height:6px;background:var(--vb);border-radius:2px;animation:swh 2.2s ease-in-out infinite}
@keyframes swh{0%{transform:translateY(0);opacity:1}75%{transform:translateY(11px);opacity:0}76%{transform:translateY(0);opacity:0}100%{opacity:1}}
.hscroll-l{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--m)}

/* ─── MARQUEES ─── */
.mq{padding:1.4rem 0;overflow:hidden !important;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);position:relative;z-index:1;background:var(--bg)}
.mqt{display:flex;animation:mqa 32s linear infinite;white-space:nowrap;will-change:transform}
.mqi{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:0 1.6rem;display:flex;align-items:center;gap:.9rem;color:var(--m);flex-shrink:0}
.mqi.a{color:var(--vg)}
.mqi.g{color:var(--gold)}
.mqs{color:var(--v);font-size:.7rem}
@keyframes mqa{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.mq2{padding:1.8rem 0;overflow:hidden !important;background:linear-gradient(135deg,var(--vd) 0%,#6d28d9 100%);position:relative}
.mq2::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 35% 50%,rgba(255,255,255,.07),transparent 60%);pointer-events:none}
.mq2t{display:flex;animation:mq2a 24s linear infinite reverse;white-space:nowrap;will-change:transform}
@keyframes mq2a{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq2i{font-size:1.8rem;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;padding:0 1.8rem;display:flex;align-items:center;gap:1.3rem;color:rgba(255,255,255,.2);flex-shrink:0}
.mq2i.lit{color:rgba(255,255,255,.92)}
.m2s{font-size:1.3rem;color:rgba(255,255,255,.15)}

/* ─── SECTION HEADERS ─── */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--bd);padding-bottom:2.5rem;margin-bottom:5rem;gap:2rem;overflow:visible}
.sec-hl{font-size:clamp(2.2rem,5.5vw,5rem);font-weight:800;letter-spacing:-.04em;line-height:1.3;padding-bottom:.35em;overflow:visible}
.sec-hl .vi,.sec-hl .gd{display:inline-block;padding-bottom:.3em;line-height:1.25;vertical-align:top;overflow:visible}
.sec-hl .vi{background:linear-gradient(135deg,var(--vb),var(--pk));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-hl .gd{background:linear-gradient(135deg,var(--gold-bright),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-n{font-family:var(--mono);font-size:clamp(3rem,7vw,6rem);font-weight:700;color:var(--s2);letter-spacing:-.06em;line-height:1;flex-shrink:0}

.seye{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--vg);display:flex;align-items:center;gap:.9rem;margin-bottom:1.5rem}
.seye::before{content:'';width:28px;height:1px;background:linear-gradient(90deg,var(--v),var(--gold));flex-shrink:0}

/* ─── STAT GRID ─── */
.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--m2)}
.sstat{background:var(--s1);padding:3.2rem 1.5rem;text-align:center;position:relative;overflow:hidden;transition:background .4s}
.sstat::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--v),var(--gold),var(--pk));transform:scaleX(0);transition:transform .55s var(--tr)}
.sstat:hover{background:var(--s2)}
.sstat:hover::before{transform:scaleX(1)}
.sstat-n{font-size:clamp(2.6rem,6vw,5rem);font-weight:800;letter-spacing:-.05em;line-height:1;background:linear-gradient(135deg,var(--vb),var(--pk));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sstat:nth-child(2) .sstat-n{background:linear-gradient(135deg,var(--gold-bright),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sstat-l{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--m);margin-top:.5rem}

/* ─── TESTIMONIALS ─── */
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--m2)}
.tc{background:var(--s1);padding:2.5rem;position:relative;overflow:hidden;transition:background .4s}
.tc-bg{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.tc:nth-child(1) .tc-bg{background:radial-gradient(ellipse at 0 0,rgba(124,58,237,.12),transparent 65%)}
.tc:nth-child(2) .tc-bg{background:radial-gradient(ellipse at 100% 0,rgba(212,185,106,.08),transparent 65%)}
.tc:hover{background:var(--s2)}
.tc:hover .tc-bg{opacity:1}
.tc-quote{font-size:.95rem;line-height:1.85;color:var(--w);margin-bottom:2rem;font-style:italic;position:relative;z-index:1}
.tc-quote::before{content:'"';font-size:3rem;color:var(--gold);display:block;line-height:.7;margin-bottom:.5rem;font-style:normal;font-family:'Syne',sans-serif}
.tc-author{display:flex;align-items:center;gap:1rem;position:relative;z-index:1}
.tc-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--bd);flex-shrink:0}
.tc-name{font-weight:800;font-size:.95rem;letter-spacing:-.01em}
.tc-role{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vg);margin-top:.15rem}

/* ─── CTA BLOCK (full width) ─── */
.cta-block{padding:11rem 5rem;text-align:center;position:relative;overflow:hidden}
.cta-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(124,58,237,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.03) 1px,transparent 1px);background-size:55px 55px;animation:gridsh 28s linear infinite;pointer-events:none}
@keyframes gridsh{from{background-position:0 0}to{background-position:55px 55px}}
.cta-gl{position:absolute;top:50%;left:50%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.1),transparent 70%);transform:translate(-50%,-50%);animation:glp 6s ease-in-out infinite;pointer-events:none;max-width:90vw;max-height:90vw}
@keyframes glp{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}
.cta-eye{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--vg);margin-bottom:2rem;position:relative}
.cta-h{font-size:clamp(3rem,8vw,7.5rem);font-weight:800;line-height:1.02;letter-spacing:-.05em;margin-bottom:2rem;position:relative;padding-bottom:.1em}
.cta-h .wh{color:var(--w);display:block;padding-bottom:.05em}
.cta-h .gr{display:block;padding-bottom:.08em;background:linear-gradient(135deg,var(--vb) 0%,var(--pk) 50%,var(--gold) 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gmove 4s linear infinite}
.cta-h .ou{display:block;-webkit-text-stroke:1.5px var(--m2);color:transparent}
@keyframes gmove{from{background-position:0% center}to{background-position:200% center}}
.cta-sub{font-family:var(--mono);font-size:.85rem;line-height:2;color:var(--m);max-width:500px;margin:0 auto 3rem;position:relative}
.cta-btns{display:flex;align-items:center;gap:1.5rem;justify-content:center;position:relative;flex-wrap:wrap}

/* ─── NEWSLETTER ─── */
.newsletter{padding:4rem 5rem;background:var(--s1);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;gap:3rem;position:relative;z-index:2}
.nl-left h3{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.5rem}
.nl-left p{font-family:var(--mono);font-size:.78rem;color:var(--m)}
.nl-form{display:flex;gap:.7rem;flex-shrink:0}
.nl-input{background:var(--bg);border:1px solid var(--bd);padding:.85rem 1.4rem;color:var(--w);font-family:var(--mono);font-size:.78rem;width:260px;outline:none;transition:border-color .3s}
.nl-input::placeholder{color:var(--m)}
.nl-input:focus{border-color:var(--vb)}
.nl-btn{padding:.85rem 1.8rem;background:linear-gradient(135deg,var(--v),var(--pk));color:var(--w);font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;border:none;cursor:pointer;transition:transform .3s,box-shadow .3s}
.nl-btn:hover{transform:translateY(-2px);box-shadow:0 15px 40px rgba(124,58,237,.35)}

/* ─── FOOTER ─── */
footer{padding:2.5rem 5rem;border-top:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;position:relative;z-index:2}
.flogo{display:flex;align-items:center;text-decoration:none}
.flogo img{height:30px;width:auto;filter:brightness(1.1)}
.flinks{display:flex;gap:2rem;flex-wrap:wrap}
.flinks a{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--m);text-decoration:none;transition:color .3s}
.flinks a:hover{color:var(--gold)}
.fcopy{font-family:var(--mono);font-size:.65rem;color:var(--m)}

/* ─── REVEAL CLASSES ─── */
@keyframes up{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.rv{opacity:0;transform:translateY(45px);transition:opacity .9s var(--tr),transform .9s var(--tr);will-change:opacity,transform}
.rvL{opacity:0;transform:translateX(-50px);transition:opacity .9s var(--tr),transform .9s var(--tr);will-change:opacity,transform}
.rvR{opacity:0;transform:translateX(50px);transition:opacity .9s var(--tr),transform .9s var(--tr);will-change:opacity,transform}
.rv.on,.rvL.on,.rvR.on{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.28s}.d4{transition-delay:.38s}.d5{transition-delay:.48s}

/* ─── RESPONSIVE BREAKPOINTS ─── */
@media (max-width:1280px){
  nav,nav.sc{padding-left:3rem;padding-right:3rem}
  :root{--pad-x:3rem}
  .cta-block{padding:9rem 3rem}
  .newsletter{padding:3.5rem 3rem}
  footer{padding:2.5rem 3rem}
}

@media (max-width:1024px){
  /* Mobile nav */
  .nav-toggle{display:flex}
  .nright{
    position:fixed;top:0;right:0;
    width:min(420px,80vw);height:100vh;
    background:rgba(6,5,15,.98);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-left:1px solid var(--bd);
    flex-direction:column;align-items:flex-start;
    padding:7rem 2.5rem 2.5rem;gap:2rem;
    transform:translateX(100%);
    transition:transform .45s var(--tr);
    z-index:550;
  }
  .nright.open{transform:translateX(0)}
  .nlinks{flex-direction:column;gap:1.5rem;width:100%}
  .nlinks a{font-size:1rem;padding:.5rem 0}
  .nbtn{width:100%;text-align:center;padding:1rem}

  /* Section padding */
  :root{--pad-x:1.5rem;--pad-y:6rem}
  nav,nav.sc{padding:1rem 1.5rem}
  .cta-block{padding:6rem 1.5rem}
  .stats-strip,.testi-grid{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start;gap:1rem}
  .sec-n{font-size:4rem}

  /* Newsletter + Footer */
  .newsletter{flex-direction:column;align-items:stretch;padding:3rem 1.5rem;gap:2rem}
  .nl-form{flex-direction:column}
  .nl-input{width:100%}
  footer{padding:2rem 1.5rem;flex-direction:column;text-align:center;gap:1.2rem}
  .flinks{justify-content:center}

  /* Marquees */
  .mq2i{font-size:1.3rem;padding:0 1.2rem;gap:.9rem}

  /* CTA */
  .cta-h{font-size:clamp(2.5rem,11vw,5rem)}
}

@media (max-width:600px){
  /* Stats strip */
  .sstat{padding:2.2rem 1rem}
  .sstat-n{font-size:2.4rem}
  .stats-strip{grid-template-columns:1fr;gap:1px}
  
  /* Testimonials */
  .tc{padding:2rem 1.5rem}
  .tc-quote{font-size:.95rem;line-height:1.75}
  .testi-grid{grid-template-columns:1fr;gap:1px}
  
  /* Logo */
  .nlogo img{height:28px}
  .flogo img{height:26px}
  
  /* Buttons full width */
  .bmain{padding:.95rem 1.6rem;font-size:.78rem;width:100%;justify-content:center}
  .cta-btns{flex-direction:column;width:100%}
  .cta-btns > *{width:100%;text-align:center}
  .bghost{text-align:center;width:100%;display:inline-block;padding:.8rem 1rem}
  .hero-btns{flex-direction:column;width:100%}
  .hero-btns > *{width:100%;justify-content:center;text-align:center}
  
  /* CTA block */
  .cta-block{padding:6rem 1rem 5rem}
  .cta-h{font-size:clamp(2.4rem,11vw,4rem);padding:0 .15rem .4em}
  .cta-h .wh,.cta-h .gr,.cta-h .ou{padding:0 .1em .15em}
  .cta-eye{font-size:.65rem}
  
  /* Section heads */
  .sec-head{flex-direction:column;align-items:flex-start;gap:1rem}
  .sec-n{font-size:5rem;align-self:flex-start;opacity:.3}
  .sec-hl{font-size:clamp(2rem,9vw,3rem);padding:0 .15rem .35em}
  .seye{font-size:.62rem}
  
  /* Marquee */
  .mq{padding:1.4rem 0}
  .mqi{font-size:.7rem;letter-spacing:.12em}
  .mq2{padding:1.6rem 0}
  .mq2i{font-size:.8rem}
  
  /* Newsletter */
  .newsletter{flex-direction:column;padding:3rem 1.5rem;gap:1.5rem;align-items:flex-start}
  .nl-form{width:100%;flex-direction:column;gap:.8rem}
  .nl-input{width:100%}
  .nl-btn{width:100%}
  
  /* Footer */
  footer{padding:3rem 1.5rem 2.5rem;flex-direction:column;align-items:flex-start;gap:1.5rem}
  .flinks{flex-wrap:wrap;gap:1rem;width:100%}
  .flinks a{font-size:.78rem}
  .fcopy{font-size:.7rem}
  
  /* Nav */
  #nav{padding:1rem 1.2rem}
  
  /* Cursor follower hidden on mobile */
  #c1,#c2{display:none}
}

@media (max-width:380px){
  .bmain{font-size:.72rem;padding:.85rem 1.2rem}
  .nbtn span{font-size:.65rem}
  .sec-hl,.cta-h,.hero-h1{letter-spacing:-.03em}
}

/* Disable hover transforms on touch devices */
@media (hover:none){
  .bmain:hover{transform:none}
  .sstat:hover,.tc:hover{background:var(--s1)}
  .feat:hover,.svc:hover,.proc-card:hover{transform:none}
  .equip-card:hover,.bts-photo:hover{transform:none}
  .polaroid:hover{animation:inherit;transform:rotate(-6deg)}
  .polaroid-now:hover{transform:rotate(5deg)}
}

/* Live-Demo-Bereich (Automated-Seite) — responsive */
@media (max-width:700px){
  .demo-grid{ grid-template-columns:1fr !important; }
}

/* ============================================================
   MOBILE-FEINSCHLIFF (iPhone Safari) — ergänzt, überschreibt nichts Wichtiges
   ============================================================ */
@media (max-width:600px){
  /* Hero: die fetten 5rem Seitenränder runter (Hauptproblem!) */
  .hero{ padding:6rem 1.4rem 4rem; }
  .hero-h1{ padding:0 .2rem .35em; }
  .hero-sub{ padding:0 .4rem; font-size:.98rem; }

  /* Gradient-Text in Safari: verhindert abgeschnittene Unterlängen (g,y,p) */
  .hero-h1 .l2,
  .hero-h1 .line{ padding-bottom:.12em; line-height:1.2; }
}

/* Genereller Schutz gegen horizontales Scrollen (Safari-Klassiker) */
html, body{ max-width:100%; overflow-x:hidden; }

/* Bilder/Medien nie breiter als der Screen */
img, video, svg, iframe{ max-width:100%; height:auto; }

/* Sehr schmale Phones (iPhone SE / Mini, ~375px und kleiner) */
@media (max-width:400px){
  .hero{ padding:5.5rem 1rem 3.5rem; }
  .hero-h1{ font-size:clamp(2.2rem,9vw,3rem); }
  .hero-sub{ font-size:.92rem; line-height:1.7; }
  .sec, .sec-large{ padding-left:1rem; padding-right:1rem; }
}