/* ==========================================================================
   TechCorp V3 stylesheet
   1  Fonts
   2  Tokens and base
   3  Layout helpers
   4  Header
   5  Buttons and links
   6  Home hero
   7  Value band
   8  Sections and headings
   9  Solution cards
   10 Dark stage and method
   11 Audience, steps, timeline, support
   12 FAQ
   13 CTA card
   14 Page hero and page stat
   15 Product pages
   16 Service and content blocks
   17 Contact and forms
   18 Legal and status pages
   19 Footer
   20 Motion
   21 Responsive
   ========================================================================== */

/* 1  Fonts ---------------------------------------------------------------- */
@font-face{font-family:Montserrat;src:url('/fonts/montserrat-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('/fonts/montserrat-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('/fonts/montserrat-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('/fonts/montserrat-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('/fonts/montserrat-800-latin.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:JetBrains;src:url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* 2  Tokens and base ------------------------------------------------------ */
:root{
  --bg:#F4F7F6;
  --surface:#ffffff;
  --ink:#121119;
  --muted:#625f6c;
  --line:rgba(28,22,47,.13);
  --violet:#7427f4;
  --purple:#9a35e8;
  --indigo:#4b2dbd;
  --deep:#171026;
  --soft:#ebe8f7;
  --radius:20px;
  --shadow:0 24px 70px rgba(45,24,91,.12);
  --max:1240px;
  --bar:900px;
  --gutter:48px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Montserrat,Arial,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3{overflow-wrap:normal;word-break:normal}

/* 3  Layout helpers ------------------------------------------------------- */
.container{width:min(calc(100% - var(--gutter)),var(--max));margin-inline:auto}
.skip-link{position:fixed;left:20px;top:10px;z-index:9999;background:#fff;color:#111;padding:10px 14px;border-radius:10px;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid rgba(116,39,244,.35);outline-offset:4px;border-radius:6px}

/* 4  Header --------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;padding:10px 0;transition:transform .32s cubic-bezier(.2,.75,.2,1)}
/* retracts on the way down, comes back as soon as the user scrolls up */
.site-header.header-hidden{transform:translateY(calc(-100% - 12px))}
/* a transform on the header would become the containing block of the fixed
   mobile menu and draw it half off-screen: snap the header back instantly */
.site-header.menu-open{transform:none;transition:none}
.site-header:before{
  content:"";
  position:absolute;
  inset:5px max(12px,calc((100% - var(--bar))/2));
  background:rgba(244,247,246,.86);
  border:1px solid transparent;
  border-radius:36px;
  backdrop-filter:blur(18px);
  transition:box-shadow .25s,border-color .25s;
}
.site-header.scrolled:before{border-color:var(--line);box-shadow:0 14px 40px rgba(32,20,58,.09)}
.header-inner{position:relative;width:min(calc(100% - 24px),var(--bar));height:70px;display:flex;align-items:center;gap:14px;padding-inline:20px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:46px;height:46px;display:grid;place-items:center;flex:none}
.brand-mark img{width:42px;height:42px;object-fit:contain}
.brand-copy{display:flex;align-items:baseline;gap:0;letter-spacing:-.05em;line-height:1}
.brand-copy strong{font-size:34px;font-weight:800}
.brand-copy span{font-size:34px;font-weight:500}
.main-nav{position:absolute;left:50%;transform:translateX(-50%)}
.main-nav ul{display:flex;align-items:center;justify-content:center;gap:24px;list-style:none;margin:0;padding:0}
.main-nav a{font-size:13px;font-weight:600;color:#393641;position:relative;text-align:center;white-space:nowrap}
.main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;background:var(--violet);transform:scaleX(0);transition:transform .2s}
.main-nav a:hover:after,.main-nav a[aria-current=page]:after{transform:scaleX(1)}
.header-tail{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.header-cta{flex:none}
.mobile-contact{display:none}
.menu-toggle{display:none;background:none;border:0;width:46px;height:46px;padding:11px;cursor:pointer;flex:none}
.menu-toggle>span:not(.sr-only){display:block;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.2s}

/* language switcher */
.lang-switch{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;background:rgba(255,255,255,.7);flex:none}
.lang-switch a{font-size:11px;font-weight:700;letter-spacing:.04em;padding:6px 10px;border-radius:999px;color:#6d6879;line-height:1}
.lang-switch a[aria-current=true]{background:var(--ink);color:#fff}

/* 5  Buttons and links ---------------------------------------------------- */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  min-height:54px;padding:15px 26px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:999px;
  font-weight:700;font-size:13px;line-height:1;text-align:center;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s;
}
.button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(18,17,25,.18)}
.button-small{min-height:44px;padding:11px 20px;font-size:12px}
.button-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.button-ghost:hover{background:#fff}
.button-light{background:#fff;color:var(--deep);border-color:#fff}
.text-link{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--violet);width:max-content;margin-top:24px}
.light-link{color:#fff}

/* shared arrow glyph for inline links */
.solution-link i,.text-link i,.related-card a i{position:relative;width:15px;height:1.6px;background:currentColor;flex:none;transition:transform .22s}
.solution-link i:after,.text-link i:after,.related-card a i:after{content:"";position:absolute;right:-1px;top:-3.2px;width:8px;height:8px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg)}
.text-link:hover i,.related-card a:hover i{transform:translateX(4px)}

/* 6  Home hero ------------------------------------------------------------ */
.hero{position:relative;overflow:hidden}
.home-hero{padding:80px 0 0}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:center;gap:74px;position:relative;z-index:2;padding-bottom:84px}
.hero-copy{max-width:760px;min-width:0}
.hero h1,.page-hero h1,.product-hero h1{font-size:clamp(46px,6.6vw,100px);line-height:.98;letter-spacing:-.055em;margin:0;color:var(--ink);font-weight:700}
.hero h1 em,.page-hero h1 em,.product-hero h1 em{font-style:normal;color:var(--violet)}
.hero-copy>p,.page-hero-grid>div>p,.product-hero-grid>div>p{font-size:17px;line-height:1.7;color:var(--muted);max-width:660px;margin:28px 0 0}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:40px}
.hero-glow,.page-glow,.product-glow{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.glow-one{width:620px;height:620px;right:-220px;top:-180px;background:radial-gradient(circle at 35% 35%,rgba(154,53,232,.4),rgba(75,45,189,.16) 45%,transparent 70%)}
.glow-two{width:430px;height:430px;left:-260px;bottom:40px;background:radial-gradient(circle,rgba(116,39,244,.18),transparent 69%)}

.hero-orbit{
  width:min(100%,460px);aspect-ratio:1;
  border:1px solid rgba(75,45,189,.22);border-radius:50%;
  display:grid;place-items:center;position:relative;margin-left:auto;
  isolation:isolate;box-shadow:0 0 0 14px rgba(116,39,244,.035),0 36px 100px rgba(75,45,189,.1);
}
.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;border:1px solid rgba(75,45,189,.14);border-radius:50%}
.hero-orbit:before{inset:12%}
.hero-orbit:after{inset:27%}
.orbit-rotor{position:absolute;inset:0;z-index:3;animation:tc-orbit 26s linear infinite;will-change:transform}
.orbit-label{
  position:absolute;background:#fff;border:1px solid rgba(75,45,189,.15);
  box-shadow:0 14px 32px rgba(31,17,66,.12);padding:11px 16px;border-radius:999px;
  font-size:12px;font-weight:700;white-space:nowrap;
  animation:tc-counter-orbit 26s linear infinite;will-change:transform;
}
.label-one{top:2%;left:12%}
.label-two{top:26%;right:-9%}
.label-three{bottom:26%;left:-9%}
.label-four{bottom:2%;right:12%}
.orbit-core{
  width:186px;height:186px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#7b2cff,#5f20dc);color:#fff;
  box-shadow:0 28px 70px rgba(91,34,210,.28);position:relative;z-index:2;
  animation:tc-core-float 5s ease-in-out infinite;will-change:transform;
}
.orbit-core img{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(24,8,62,.2))}

/* 7  Value band ----------------------------------------------------------- */
.value-band{
  position:relative;z-index:2;width:100%;overflow:hidden;
  background:linear-gradient(90deg,#5b1fd6,#7427f4 48%,#9a35e8);
  color:#fff;padding:26px 0;
}
.value-track{display:flex;flex:none;align-items:center;width:max-content;animation:tc-marquee 42s linear infinite;will-change:transform}
.value-group{display:flex;flex:none;align-items:center;gap:44px;padding-right:44px}
.value-group span{white-space:nowrap;font-size:clamp(16px,1.5vw,21px);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#fff}
.value-group i{flex:none;width:7px;height:7px;border-radius:50%;background:#fff}

/* 8  Sections and headings ------------------------------------------------ */
.section{padding:112px 0}
.section-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.65fr);align-items:end;gap:64px;margin-bottom:52px}
.section-intro h2,.stage-copy h2,.split-feature h2,.faq-layout h2,.footer-lead h2{font-size:clamp(36px,4.6vw,66px);line-height:1.04;letter-spacing:-.055em;margin:0;font-weight:700}
.section-intro p{color:var(--muted);font-size:16px;margin:0}
.section-intro>div{min-width:0}
.section-intro>.text-link{margin-top:0;align-self:end;justify-self:start}
.soft-panel{background:#ebe8f5}

.step-number{
  display:block;font-family:Montserrat,Arial,sans-serif;
  font-size:clamp(34px,3.6vw,54px);font-weight:700;line-height:.9;letter-spacing:-.07em;color:var(--violet);
}
.dark-stage .step-number,.service-steps .step-number{color:#bca9ff}

/* 9  Solution cards ------------------------------------------------------- */
.solutions-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.solution-card{
  grid-column:span 4;
  display:flex;flex-direction:column;align-items:flex-start;
  background:#fff;border:1px solid rgba(26,19,43,.12);border-radius:16px;
  padding:26px 24px 24px;position:relative;overflow:hidden;
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.solution-card:hover{transform:translateY(-3px);border-color:rgba(116,39,244,.34);box-shadow:0 16px 38px rgba(28,18,48,.1)}
.solution-index{
  position:absolute;top:18px;right:22px;
  font-family:Montserrat,Arial,sans-serif;font-size:24px;font-weight:800;
  line-height:1;letter-spacing:-.05em;color:var(--violet);
}
.solution-card h3{font-size:20px;line-height:1.22;letter-spacing:-.035em;margin:40px 0 10px;font-weight:700;padding-right:34px}
.solution-card p{font-size:13px;line-height:1.62;color:var(--muted);margin:0 0 22px}
.solution-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;color:var(--violet);
}
.solution-link i{position:relative;width:15px;height:1.6px;background:currentColor;flex:none;transition:transform .22s}
.solution-link i:after{content:"";position:absolute;right:-1px;top:-3.2px;width:8px;height:8px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg)}
.solution-card:hover .solution-link i{transform:translateX(4px)}

/* 10 Dark stage and method ------------------------------------------------ */
.dark-stage{background:var(--deep);color:#fff;position:relative;overflow:hidden}
.dark-stage:before{content:"";position:absolute;width:780px;height:780px;border-radius:50%;right:-340px;top:-390px;background:radial-gradient(circle,rgba(116,39,244,.42),transparent 66%)}
.stage-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(400px,1.05fr);gap:88px;align-items:center;position:relative;z-index:1}
.stage-copy p{color:#c6c0d0;font-size:16px;max-width:600px;margin:26px 0 34px}
.stage-cta{min-width:205px}
.method-stack{display:grid;gap:0;min-width:0}
.method-card{
  display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:center;
  border-top:1px solid rgba(255,255,255,.16);padding:28px 0;
}
.method-card:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.method-card h3{font-size:22px;margin:0 0 4px;letter-spacing:-.03em}
.method-card p{color:#aaa3b5;margin:0;font-size:13px}
.big-statement{border-left:1px solid rgba(255,255,255,.18);padding-left:66px}
.big-statement p{font-size:clamp(32px,4.4vw,64px);line-height:1.06;letter-spacing:-.055em;margin:0}
.light-intro{color:#fff}
.light-intro p{color:#c4becd}
.service-steps{position:relative;z-index:1}

/* 11 Audience, steps, timeline, support ----------------------------------- */
.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.audience-card{
  display:flex;flex-direction:column;justify-content:center;
  min-height:290px;padding:40px 22px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.audience-card .step-number{margin:0 0 26px}
.audience-card h3{font-size:23px;line-height:1.16;letter-spacing:-.035em;margin:0 0 12px}
.audience-card p{color:var(--muted);font-size:13px;margin:0}

.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps-grid article{border-top:1px solid rgba(255,255,255,.17);padding:26px 10px 8px 0}
.steps-grid .step-number{margin-bottom:30px}
.steps-grid h3{font-size:22px;margin:0 0 10px;letter-spacing:-.03em}
.steps-grid p{font-size:13px;color:#aaa3b5;margin:0}

.timeline-grid,.support-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.support-grid{grid-template-columns:repeat(3,1fr)}
.timeline-grid article,.support-grid article{position:relative;padding:30px 26px;border:1px solid var(--line);border-radius:18px;background:#fff}
.timeline-grid .step-number,.support-grid .step-number{
  position:absolute;top:20px;right:24px;margin:0;
  font-size:24px;font-weight:800;line-height:1;letter-spacing:-.05em;
}
.timeline-grid h3,.support-grid h3{font-size:21px;line-height:1.18;margin:40px 0 12px;padding-right:38px;letter-spacing:-.03em}
.timeline-grid p,.support-grid p{font-size:13px;color:var(--muted);margin:0}

/* 12 FAQ ------------------------------------------------------------------ */
.faq-section{border-top:1px solid var(--line)}
.faq-layout{display:grid;grid-template-columns:minmax(0,.65fr) minmax(440px,1fr);gap:80px;align-items:start}
.faq-layout>div:first-child>p{color:var(--muted);max-width:480px}
.faq-list{border-top:1px solid var(--line);min-width:0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-button{width:100%;border:0;background:none;padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;font-size:16px;font-weight:700;cursor:pointer}
.faq-button i{width:20px;height:20px;position:relative;flex:none}
.faq-button i:before,.faq-button i:after{content:"";position:absolute;background:var(--ink);left:4px;right:4px;top:9px;height:1.5px}
.faq-button i:after{transform:rotate(90deg);transition:transform .2s}
.faq-button[aria-expanded=true] i:after{transform:rotate(0)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s}
.faq-answer>p{overflow:hidden;color:var(--muted);font-size:14px;margin:0}
.faq-button[aria-expanded=true]+.faq-answer{grid-template-rows:1fr}
.faq-button[aria-expanded=true]+.faq-answer>p{padding-bottom:24px}

/* 13 CTA card ------------------------------------------------------------- */
/* the white band above and below the violet card must be equal, so the padding
   is split between the closing section and whatever precedes it */
.final-cta{padding:var(--cta-band,96px) 0}
.section:not(.dark-stage):not(.soft-panel):has(+ .final-cta){padding-bottom:var(--cta-band,96px)}
.section:not(.dark-stage):not(.soft-panel) + .final-cta{padding-top:0}
main:has(.final-cta) + .site-footer{margin-top:0}
.cta-card{
  background:linear-gradient(135deg,#4b2dbd,#8d31df 65%,#b644d8);color:#fff;
  border-radius:28px;padding:70px;min-height:400px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  position:relative;overflow:hidden;
}
.cta-card:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.25);border-radius:50%;right:-120px;top:-170px;box-shadow:0 0 0 55px rgba(255,255,255,.04),0 0 0 110px rgba(255,255,255,.03)}
.cta-card h2{font-size:clamp(36px,5.4vw,72px);line-height:1;letter-spacing:-.06em;margin:0;max-width:850px;position:relative;z-index:1}
.cta-card p{font-size:16px;color:rgba(255,255,255,.84);max-width:600px;margin:22px 0 34px;position:relative;z-index:1}
.cta-card .button{position:relative;z-index:1}

/* 14 Page hero and page stat ---------------------------------------------- */
.page-hero,.product-hero{position:relative;overflow:hidden;padding:80px 0 100px}
.page-glow{width:740px;height:740px;right:-300px;top:-360px;background:radial-gradient(circle,rgba(116,39,244,.26),transparent 68%)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:end;position:relative;z-index:1}
.page-hero-grid>div{min-width:0}
.page-hero h1{font-size:clamp(44px,6.4vw,92px);max-width:1040px}
.page-hero-grid>div>p{max-width:720px}
.page-hero .button,.product-hero .button{margin-top:44px}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:40px;font-size:11px;color:#817c89}
.breadcrumb i{font-style:normal;color:#aaa4b0}
.breadcrumb a:hover{color:var(--violet)}

/* 15 Product pages -------------------------------------------------------- */
.product-hero{background:linear-gradient(145deg,#efeaf8,#f4f7f6 62%)}
.product-hero.accent-indigo{background:linear-gradient(145deg,#e9e7f7,#f4f7f6 62%)}
.product-hero.accent-purple{background:linear-gradient(145deg,#f2e7f6,#f4f7f6 62%)}
.product-glow{width:620px;height:620px;right:-220px;top:-290px;background:radial-gradient(circle,rgba(116,39,244,.3),transparent 66%)}
.product-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:end;position:relative;z-index:1}
.product-hero-grid>div{min-width:0}
.product-hero h1{font-size:clamp(42px,6vw,84px);max-width:1040px}
.product-hero-grid>div>p{max-width:720px}
.product-overview{display:grid;grid-template-columns:minmax(0,.8fr) minmax(400px,1fr);gap:88px;align-items:center}
.product-overview>div{min-width:0}
.product-overview h2{font-size:clamp(32px,4.4vw,62px);line-height:1.05;letter-spacing:-.055em;margin:0}
.product-overview>div:first-child>p{color:var(--muted)}
.feature-panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:var(--shadow)}
.feature-panel h3{font-size:21px;margin:0 0 22px;letter-spacing:-.03em}
.feature-panel ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.feature-panel li{display:flex;align-items:center;gap:13px;font-size:14px;font-weight:600}
.feature-panel li svg{width:20px;height:20px;flex:none;color:var(--violet);padding:4px;background:#f0eafa;border-radius:50%;stroke-width:2.5}

.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;align-items:flex-start}
.related-card>span{font:500 10px/1 JetBrains,monospace;color:var(--violet);text-transform:uppercase;letter-spacing:.16em}
.related-card h3{font-size:20px;margin:30px 0 10px;letter-spacing:-.035em;line-height:1.22}
.related-card p{font-size:13px;line-height:1.62;color:var(--muted);margin:0 0 22px}
.related-card a{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--violet)}

/* 16 Service and content blocks ------------------------------------------- */
.split-feature{display:grid;grid-template-columns:minmax(0,.85fr) minmax(400px,1fr);gap:88px;align-items:center}
.split-feature>div{min-width:0}
.split-feature h2{font-size:clamp(30px,3.6vw,50px);line-height:1.06}
.split-feature>div:first-child>p{color:var(--muted);font-size:16px}
.choice-list,.definition-list{display:grid}
.choice-list>div,.definition-list>div{display:grid;grid-template-columns:74px 1fr;gap:20px;align-items:center;border-top:1px solid rgba(35,24,61,.18);padding:18px 0}
.choice-list .step-number,.definition-list .step-number{font-size:clamp(28px,2.8vw,40px)}
.choice-list p,.definition-list p{margin:0;font-weight:600;font-size:15px}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.service-tile{position:relative;border:1px solid var(--line);border-radius:18px;padding:30px 26px;background:rgba(255,255,255,.6)}
.service-tile .step-number{
  position:absolute;top:20px;right:24px;margin:0;
  font-size:24px;font-weight:800;line-height:1;letter-spacing:-.05em;
}
.service-tile h3{font-size:24px;line-height:1.14;letter-spacing:-.04em;margin:40px 0 12px;padding-right:38px}
.service-tile p{font-size:13px;color:var(--muted);margin:0}

.quote-panel{background:#fff;border-radius:22px;padding:46px;border:1px solid var(--line);box-shadow:var(--shadow)}
.quote-panel p{font-size:clamp(26px,3vw,34px);line-height:1.22;letter-spacing:-.045em;margin:0 0 26px}
.quote-panel span{font:500 10px JetBrains,monospace;color:var(--violet);text-transform:uppercase;letter-spacing:.14em}

.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.format-grid>div{background:rgba(255,255,255,.78);border:1px solid rgba(50,31,90,.1);border-radius:16px;padding:24px}
.format-grid strong{display:block;font-size:17px;margin-bottom:7px;letter-spacing:-.03em}
.format-grid span{font-size:12px;color:var(--muted)}

.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.do-dont>div{background:#fff;border:1px solid rgba(50,31,90,.1);border-radius:18px;padding:26px}
.do-dont>div>span{font:500 10px JetBrains,monospace;color:var(--violet);text-transform:uppercase;letter-spacing:.14em}
.do-dont ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.do-dont li{font-size:13px;display:flex;gap:10px;align-items:center}
.do-dont svg{width:18px;height:18px;flex:none;color:var(--violet)}

.principles{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.principles article{background:#fff;padding:26px}
.principles .step-number{font-size:clamp(28px,2.8vw,40px)}
.principles h3{font-size:21px;margin:18px 0 8px;letter-spacing:-.03em}
.principles p{font-size:13px;color:var(--muted);margin:0}

.portfolio-cloud{display:flex;gap:10px;flex-wrap:wrap;align-content:center}
.portfolio-cloud a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:13px 18px;font-size:13px;font-weight:700;transition:.2s}
.portfolio-cloud a:hover{background:#fff;color:var(--deep)}

.company-facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.company-facts>div{padding:26px 20px 26px 0;border-bottom:1px solid var(--line);display:grid;gap:6px;min-width:0}
.company-facts>div:nth-child(odd){border-right:1px solid var(--line)}
.company-facts>div:nth-child(even){padding-left:28px}
.company-facts span{font:500 10px JetBrains,monospace;color:var(--violet);text-transform:uppercase;letter-spacing:.14em}
.company-facts strong{font-size:17px;letter-spacing:-.03em;overflow-wrap:anywhere}

/* 17 Contact and forms ---------------------------------------------------- */
.contact-layout{display:grid;grid-template-columns:minmax(280px,.65fr) minmax(0,1.15fr);gap:32px;align-items:start}
.contact-aside{position:sticky;top:112px;background:var(--deep);color:#fff;border-radius:22px;padding:34px}
.contact-aside h2{font-size:clamp(28px,3vw,36px);line-height:1.08;letter-spacing:-.05em;margin:0}
.contact-aside>p{color:#bdb6c7;font-size:14px}
.contact-detail{border-top:1px solid rgba(255,255,255,.13);padding:18px 0 0;margin-top:18px}
.contact-detail>span{font:500 9px JetBrains,monospace;color:#bca9ff;text-transform:uppercase;letter-spacing:.14em;display:block;margin-bottom:7px}
.contact-detail p,.contact-detail a{font-size:13px;margin:0;color:#fff;overflow-wrap:anywhere}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:22px;padding:38px;box-shadow:var(--shadow);min-width:0}
.form-head{margin-bottom:28px}
.form-head h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.05em;margin:0}
.form-head p{color:var(--muted);font-size:12px;margin:7px 0 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px;min-width:0}
.field-full{grid-column:1/-1}
.field label{font-size:11px;font-weight:700}
.field input,.field select,.field textarea{width:100%;max-width:100%;border:1px solid #d8d4de;border-radius:12px;background:#fafafa;color:var(--ink);padding:14px 15px;outline:none;transition:.2s;font-size:16px}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(116,39,244,.1);background:#fff}
.privacy-check{display:flex;align-items:flex-start;gap:10px;margin:22px 0;font-size:11px;color:var(--muted)}
.privacy-check input{margin-top:3px;flex:none}
.privacy-check a{text-decoration:underline;color:var(--indigo)}
.form-note{font-size:10px;color:#898491;margin:14px 0 0}
.honeypot{position:absolute!important;left:-9999px!important}

/* 18 Legal and status pages ----------------------------------------------- */
.legal{padding:80px 0 120px}
.legal-wrap{max-width:860px}
.legal h1{font-size:clamp(40px,6.4vw,76px);line-height:1.02;letter-spacing:-.06em;margin:0 0 14px}
.legal .updated{font-size:11px;color:#817b88;margin:0 0 42px}
.legal h2{font-size:clamp(24px,2.6vw,28px);line-height:1.22;letter-spacing:-.035em;margin:44px 0 12px}
.legal h3{font-size:18px;margin:26px 0 8px;letter-spacing:-.02em}
.legal p,.legal li{font-size:14.5px;color:#55515e}
.legal ul,.legal ol{padding-left:20px}
.legal li{margin-bottom:6px}
.legal a{color:var(--indigo);text-decoration:underline;overflow-wrap:anywhere}
.legal table{width:100%;border-collapse:collapse;margin:18px 0;font-size:13px}
.legal th,.legal td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.legal th{background:#f0edf8;font-weight:700}
.legal-callout{background:#ebe8f7;border-left:4px solid var(--violet);border-radius:0 14px 14px 0;padding:18px 22px}
.legal-toc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin:0 0 40px}
.legal-toc h2{font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin:0 0 14px;color:var(--violet)}
.legal-toc ol{margin:0;padding-left:18px;columns:2;column-gap:32px}
.legal-toc li{font-size:13px;margin-bottom:6px;break-inside:avoid}
.legal-toc a{color:#55515e;text-decoration:none}
.legal-toc a:hover{color:var(--violet);text-decoration:underline}

.status-page{min-height:70vh;display:grid;place-items:center;padding:80px 24px}
.status-card{text-align:center;max-width:720px}
.status-code{font:500 11px JetBrains,monospace;color:var(--violet);text-transform:uppercase;letter-spacing:.16em}
.status-card h1{font-size:clamp(42px,6.4vw,74px);line-height:1.02;letter-spacing:-.06em;margin:18px 0}
.status-card p{color:var(--muted);margin:0 auto 30px;max-width:580px}
.status-card .hero-actions{justify-content:center}

/* 19 Footer --------------------------------------------------------------- */
.site-footer{background:#100a1d;color:#fff;margin-top:80px;padding-top:84px}
.footer-lead{display:grid;grid-template-columns:1fr;align-items:start;gap:40px;padding-bottom:72px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-lead h2{max-width:940px}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:48px;padding:64px 0}
.footer-grid>div{min-width:0}
.brand-footer .brand-copy strong,.brand-footer .brand-copy span{color:#fff;font-size:32px}
.footer-brand p{font-size:13px;color:#aaa3b5;max-width:350px}
.footer-email{font-size:13px;font-weight:700;color:#c5b7ff;overflow-wrap:anywhere}
.site-footer h3{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#c5b7ff;margin:7px 0 18px}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.site-footer li,.site-footer a{font-size:12px;color:#bbb4c3}
.site-footer a:hover{color:#fff}
.footer-bottom{min-height:70px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px 0}
.footer-bottom p{font-size:11px;color:#8f8996;margin:0}
.footer-bottom>div{display:flex;gap:20px;flex-wrap:wrap}
.footer-bottom a{font-size:11px}

/* 20 Motion --------------------------------------------------------------- */
@keyframes tc-orbit{to{transform:rotate(360deg)}}
@keyframes tc-counter-orbit{to{transform:rotate(-360deg)}}
@keyframes tc-core-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.025)}}
@keyframes tc-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.js .reveal.visible{opacity:1;transform:none}

.section-transition{position:relative;isolation:isolate;overflow:clip}
.section-transition:after{
  content:"";position:absolute;left:50%;top:0;
  width:min(calc(100% - var(--gutter)),var(--max));height:1px;
  background:linear-gradient(90deg,transparent,rgba(116,39,244,.48),transparent);
  transform:translateX(-50%) scaleX(0);transform-origin:center;
  transition:transform 1.1s cubic-bezier(.2,.75,.2,1);
}
.js [data-section-transition]{opacity:0;transform:translateY(56px);filter:blur(9px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,.8,.2,1),filter .9s ease}
.js [data-section-transition].section-visible{opacity:1;transform:none;filter:none}
.js [data-section-transition].section-visible:after{transform:translateX(-50%) scaleX(1)}
.js [data-section-transition]>.container{transition:transform 1.05s cubic-bezier(.16,.8,.2,1)}
.js main>section:nth-of-type(even)[data-section-transition]:not(.section-visible)>.container{transform:translateX(-20px) scale(.986)}
.js main>section:nth-of-type(odd)[data-section-transition]:not(.section-visible)>.container{transform:translateX(20px) scale(.986)}
.js [data-section-transition].section-visible>.container{transform:none}

/* 21 Responsive ----------------------------------------------------------- */
@media(max-width:1180px){
  :root{--bar:calc(100% - 24px)}
  .header-inner{gap:14px;padding-inline:18px}
  .brand-copy strong,.brand-copy span{font-size:30px}
  .main-nav ul{gap:20px}
  .main-nav a{font-size:12px}
}

@media(max-width:1080px){
  .header-cta{display:none}
  .hero-layout,.page-hero-grid,.product-hero-grid,.stage-grid,.split-feature,.product-overview{gap:52px}
  .hero-layout{grid-template-columns:minmax(0,1fr) 360px}
  .solution-card,.solution-card:nth-child(-n+3){grid-column:span 6}
  .audience-grid,.steps-grid,.timeline-grid{grid-template-columns:repeat(2,1fr)}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:40px}
  .footer-grid>div:last-child{grid-column:2}
  .contact-layout{grid-template-columns:320px minmax(0,1fr)}
  .product-hero-grid{grid-template-columns:minmax(0,1fr) 300px}
}

@media(max-width:850px){
  :root{--gutter:32px}
  .site-header{padding:7px 0}
  .site-header:before{inset:4px 8px;border-radius:28px}
  .header-inner{width:calc(100% - 16px);height:62px;padding-inline:12px;gap:10px}
  .brand-mark{width:40px;height:40px}
  .brand-mark img{width:36px;height:36px}
  .brand-copy strong,.brand-copy span{font-size:30px}
  .menu-toggle{display:block}
  .header-tail{gap:4px}
  .main-nav{
    position:fixed;left:14px;right:14px;top:74px;transform:translateY(-10px);
    background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:20px;
    padding:12px 20px;box-shadow:var(--shadow);
    opacity:0;visibility:hidden;transition:.2s;
    max-height:calc(100vh - 96px);overflow-y:auto;
  }
  .main-nav.open{opacity:1;visibility:visible;transform:none}
  .main-nav ul{display:grid;gap:0;justify-items:stretch}
  .main-nav li{border-bottom:1px solid var(--line);width:100%}
  .main-nav li:last-child{border:0}
  .main-nav a{display:block;padding:14px 0;font-size:15px;text-align:center}
  .main-nav a:after{display:none}
  .mobile-contact{display:block}

  .hero-layout,.page-hero-grid,.product-hero-grid,.stage-grid,.split-feature,.product-overview,.faq-layout,.contact-layout{grid-template-columns:1fr}
  .home-hero{padding-top:56px}
  .hero-layout{gap:56px;padding-bottom:64px}
  .hero-orbit{margin-inline:auto;width:min(78vw,420px)}
  .value-band{padding:22px 0}
  .value-group{gap:34px;padding-right:34px}
  .section{padding:84px 0}
  .section-intro{grid-template-columns:1fr;gap:20px;margin-bottom:40px}
  .stage-grid{gap:56px}
  .method-card{grid-template-columns:86px 1fr;padding:24px 0}
  .page-hero,.product-hero{padding:60px 0 78px}
  .page-hero .button,.product-hero .button{margin-top:36px}
  .product-mark{margin-inline:auto}
  .big-statement{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding:40px 0 0}
  .related-grid,.support-grid{grid-template-columns:1fr}
  .faq-layout{gap:36px}
  .contact-aside{position:static}
  .contact-layout{gap:24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer-grid>div:last-child{grid-column:auto}
  .js main>section:nth-of-type(even)[data-section-transition]:not(.section-visible)>.container,
  .js main>section:nth-of-type(odd)[data-section-transition]:not(.section-visible)>.container{transform:translateY(8px) scale(.99)}
  .js [data-section-transition]{transform:translateY(38px);filter:blur(6px)}
}

@media(max-width:620px){
  :root{--gutter:24px}
  h1,h2,h3{overflow-wrap:break-word}
  .header-inner{height:58px;padding-inline:10px}
  .brand-mark{width:34px;height:34px}
  .brand-mark img{width:31px;height:31px}
  .brand-copy strong,.brand-copy span{font-size:26px}
  .main-nav{top:68px}
  .lang-switch a{padding:5px 8px;font-size:10px}

  .hero h1,.page-hero h1,.product-hero h1{font-size:40px;letter-spacing:-.045em}
  .hero-copy>p,.page-hero-grid>div>p,.product-hero-grid>div>p{font-size:15px;margin-top:22px}
  .hero-actions{display:grid;width:100%;gap:10px;margin-top:32px}
  .hero-actions .button{width:100%;min-height:52px}
  .hero-orbit{width:min(86vw,360px)}
  .orbit-core{width:140px;height:140px}
  .orbit-core img{width:84px;height:84px}
  .orbit-label{padding:8px 12px;font-size:10px}
  .label-two{right:-6%}
  .label-three{left:-6%}

  .value-band{padding:18px 0}
  .value-group{gap:24px;padding-right:24px}
  .value-group i{width:5px;height:5px}

  .section{padding:64px 0}
  .solutions-grid{grid-template-columns:1fr;gap:12px}
  .solution-card,.solution-card:nth-child(-n+3){grid-column:auto;padding:20px;border-radius:16px}
  .solution-index{top:16px;right:18px;font-size:21px}
  .solution-card h3{font-size:19px;margin-top:32px}

  .audience-grid,.steps-grid,.timeline-grid,.service-grid,.format-grid,.do-dont,.company-facts,.form-grid,.related-grid{grid-template-columns:1fr}
  .audience-card{min-height:0;padding:28px 4px}
  .audience-card .step-number{margin-bottom:18px}
  .method-card{grid-template-columns:64px 1fr;padding:20px 0;gap:14px}
  .steps-grid .step-number{margin-bottom:20px}
  .steps-grid article{padding-right:0}
  .timeline-grid article,.support-grid article{padding:24px 20px}
  .service-tile{padding:26px 22px}
  .timeline-grid .step-number,.support-grid .step-number,.service-tile .step-number{top:16px;right:18px;font-size:21px}
  .timeline-grid h3,.support-grid h3,.service-tile h3{margin-top:32px;padding-right:32px}

  .page-hero,.product-hero{padding:48px 0 62px}
  .breadcrumb{margin-bottom:28px}
  .product-mark{width:min(80vw,260px)}
  .product-mark>span{font-size:72px}
  .product-mark strong{font-size:20px}
  .feature-panel,.quote-panel,.contact-form,.contact-aside{padding:24px}
  .product-overview,.split-feature{gap:44px}
  .choice-list>div,.definition-list>div{grid-template-columns:56px 1fr;gap:14px}
  .company-facts>div:nth-child(odd){border-right:0}
  .company-facts>div:nth-child(even){padding-left:0}
  .field-full{grid-column:auto}

  .cta-card{padding:40px 24px;min-height:0;border-radius:22px}
  .cta-card p{margin:18px 0 28px}
  .cta-card .button{width:100%}

  .legal{padding:52px 0 84px}
  .legal-toc ol{columns:1}
  .legal table{display:block;overflow-x:auto;white-space:nowrap}

  .footer-lead{padding-bottom:36px;gap:24px}
  /* brand full width, the two solution columns side by side, TechCorp below */
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px 18px;padding:36px 0}
  .footer-brand,.footer-grid>div:nth-child(4){grid-column:1/-1}
  .footer-grid>div:nth-child(3)>h3{visibility:hidden}
  .footer-grid>div:nth-child(4) ul{grid-template-columns:1fr 1fr}
  .site-footer h3{margin:0 0 12px}
  .site-footer ul{gap:8px}
  .footer-brand p{margin:14px 0 12px}
  .brand-footer .brand-copy strong,.brand-footer .brand-copy span{font-size:26px}
  .footer-bottom{display:grid;justify-items:center;text-align:center;gap:10px;padding:16px 0;min-height:0}
  .footer-bottom>div{justify-content:center;gap:10px 16px}
  .site-footer{margin-top:48px;padding-top:52px}
}

@media(max-width:400px){
  .brand-copy strong,.brand-copy span{font-size:23px}
  .brand-mark{width:30px;height:30px}
  .brand-mark img{width:27px;height:27px}
  .hero h1,.page-hero h1,.product-hero h1{font-size:34px}
  .section-intro h2,.stage-copy h2,.split-feature h2,.faq-layout h2,.footer-lead h2{font-size:31px}
  .value-group span{font-size:15px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .orbit-rotor,.orbit-label,.orbit-core,.value-track{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .button,.solution-card{transition:none}
  .js [data-section-transition],
  .js [data-section-transition]>.container,
  .js main>section:nth-of-type(even)[data-section-transition]:not(.section-visible)>.container,
  .js main>section:nth-of-type(odd)[data-section-transition]:not(.section-visible)>.container{opacity:1;transform:none;filter:none;transition:none}
  .section-transition:after{transform:translateX(-50%) scaleX(1);transition:none}
}

/* 22 Consent banner ------------------------------------------------------- */
.cc-root{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  display:flex;justify-content:flex-start;
  padding:18px;pointer-events:none;
}
.cc-card{
  pointer-events:auto;position:relative;
  width:min(100%,440px);max-height:calc(100vh - 36px);overflow-y:auto;
  background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:20px;
  padding:26px 26px 22px;
  box-shadow:0 24px 70px rgba(28,18,48,.22);
  opacity:0;transform:translateY(14px);
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.75,.2,1);
}
.cc-visible .cc-card{opacity:1;transform:none}
.cc-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;
  border:0;background:none;cursor:pointer;border-radius:50%;
}
.cc-close:before,.cc-close:after{
  content:"";position:absolute;left:9px;right:9px;top:15px;height:1.6px;background:#6d6879;
}
.cc-close:before{transform:rotate(45deg)}
.cc-close:after{transform:rotate(-45deg)}
.cc-close:hover{background:var(--bg)}
.cc-title{font-size:19px;line-height:1.2;letter-spacing:-.035em;margin:0 0 10px;padding-right:30px;font-weight:700}
.cc-body{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 12px}
.cc-links{font-size:12px;margin:0 0 20px;color:var(--muted)}
.cc-links a{color:var(--violet);font-weight:700;text-decoration:underline}
.cc-actions{display:flex;flex-wrap:wrap;gap:8px}
.cc-btn{
  flex:1 1 auto;min-width:126px;min-height:44px;padding:11px 16px;
  border-radius:999px;font-size:12px;font-weight:700;line-height:1;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
/* accept and reject share one style: refusing must be as easy as accepting */
.cc-btn-solid{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.cc-btn-solid:hover{background:var(--violet);border-color:var(--violet)}
.cc-btn-quiet{background:transparent;color:var(--ink);border:1px solid var(--line)}
.cc-btn-quiet:hover{background:var(--bg)}

.cc-panel{border-top:1px solid var(--line);margin:0 0 18px;padding-top:6px}
.cc-panel-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--violet);margin:14px 0 12px}
.cc-row{padding:12px 0;border-bottom:1px solid var(--line)}
.cc-row:last-child{border-bottom:0}
.cc-row-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cc-row-name{font-size:13px;font-weight:700}
.cc-locked{font-size:10px;font-weight:700;color:#8b8692;text-transform:uppercase;letter-spacing:.1em}
.cc-row-head input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--violet);cursor:pointer}
.cc-row-desc{font-size:12px;line-height:1.55;color:var(--muted);margin:7px 0 0}

@media(max-width:620px){
  .cc-root{padding:12px}
  .cc-card{width:100%;padding:22px 20px 18px;border-radius:18px}
  .cc-btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  .cc-card{transition:none;opacity:1;transform:none}
}
