:root{
  /* ===== OFFICIAL TEGSH CHANAR PALETTE (BRAND BOOK 2022, p.10-11) ===== */
  --navy:#002F66;        /* PANTONE 287 C */
  --blue:#005AA9;        /* PANTONE 2132 C / 2175 C */
  --blue-mid:#0071BB;    /* PANTONE 2173 C */
  --cyan:#0088CF;        /* PANTONE 306 C */
  --cyan-light:#6DCEF5;  /* PANTONE Blue 0821 C */
  --cyan-pale:#B8E4FA;   /* PANTONE 290 C */
  --ink:#151515;         /* PANTONE Black 6 C */
  --graphite:#3A4552;    /* neutral text tone for secondary copy */
  --gray:#D0D2D3;        /* PANTONE 427 C */
  --white:#FFFFFF;
  --surface:#F3F6F9; --surface-2:#E7EDF3;
  --line:rgba(0,47,102,.13); --line-2:rgba(0,47,102,.26);
  --line-on-navy:rgba(184,228,250,.22);
  --font:"Montserrat","Noto Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --r-lg:20px; --r-md:16px; --r-sm:12px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(0,47,102,.05), 0 10px 26px rgba(0,47,102,.07);
  --sh-2:0 14px 36px rgba(0,47,102,.14);
  --ease:cubic-bezier(.22,1,.36,1); --d:280ms;
  --gut:24px; --pad:56px; --maxw:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--white);color:var(--ink);font-family:var(--font);font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.micro{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:12px;top:12px}

/* ---------- OFFICIAL GEOMETRIC PATTERN (ribbon chevrons, rising) ---------- */

.pattern--footer,

/* ==========================================================================
   OFFICIAL BRAND GRAPHICS  (assets/tc-*.png)
   Extracted from BRANDBOOK FINAL.pdf at 1200 dpi. The interlocking ribbon
   pattern is used as a light-surface field (the brandbook's own application),
   the official ribbon/V element on navy and as a large environmental graphic.
   Vector originals (AI/EPS) are still required for a production-perfect,
   freely scalable version — see the delivery notes.
   ========================================================================== */
.brand-pattern{position:absolute;pointer-events:none;background-repeat:no-repeat;background-size:cover;background-position:50% 50%;
  background-image:url("../assets/tc-pattern-blue.png");opacity:.07;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.brand-pattern--band{left:0;right:0;top:0;height:100%;opacity:.055}
.brand-pattern--soft{opacity:.045}
.brand-ribbon{position:absolute;pointer-events:none;background-repeat:no-repeat;background-size:contain;background-position:right center;
  background-image:url("../assets/tc-ribbon-navy.png");opacity:.9}
.brand-ribbon--hero{right:-4%;top:50%;transform:translateY(-50%);width:min(52vw,760px);height:78%;opacity:.55}
.brand-ribbon--footer{right:-6%;bottom:-10%;width:min(38vw,520px);height:130%;opacity:.5}
.brand-ribbon--light{background-image:url("../assets/tc-ribbon-light.png");opacity:.5;right:-6%;top:50%;transform:translateY(-50%);width:min(46vw,660px);height:70%}
@media(max-width:980px){
  .brand-ribbon--hero{width:86vw;right:-22%;opacity:.34;height:62%}
  .brand-ribbon--footer{width:66vw;right:-20%;opacity:.36}
  .brand-ribbon--light{width:88vw;right:-26%;opacity:.3}
  .brand-pattern{opacity:.045}
}
@media (prefers-reduced-motion:reduce){ .brand-pattern,.brand-ribbon{opacity:.05} }

/* ---------- HEADER (navy, official negative logo) ---------- */
.topbar{background:#001E42;color:rgba(184,228,250,.82);font-size:12px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:16px;flex-wrap:wrap}
header.site{position:sticky;top:0;z-index:40;background:var(--navy);border-bottom:1px solid var(--line-on-navy)}
.head{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:86px}
.logo img{height:38px;width:auto}
nav.menu{display:flex;gap:24px;flex-wrap:wrap}
nav.menu a{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.86);
  padding:7px 0;border-bottom:2px solid transparent;transition:color var(--d) var(--ease),border-color var(--d) var(--ease)}
nav.menu a:hover{color:#fff;border-bottom-color:var(--cyan-light)}
nav.menu a[aria-current="page"]{color:#fff;border-bottom-color:var(--cyan)}
@media(max-width:980px){nav.menu.open a{color:var(--navy)} nav.menu.open a:hover{color:var(--cyan)}}
.tools{display:flex;align-items:center;gap:12px}
.lang{display:flex;border:1px solid rgba(184,228,250,.4);border-radius:var(--r-pill);overflow:hidden}
.lang button{background:none;border:0;font-size:11px;letter-spacing:.12em;font-weight:600;padding:8px 14px;cursor:pointer;color:rgba(255,255,255,.8)}
.lang button[aria-pressed="true"]{background:var(--cyan);color:#fff}
.burger{display:none;border:1px solid rgba(184,228,250,.4);border-radius:var(--r-sm);background:none;color:#fff;padding:9px 13px;cursor:pointer}
@media(max-width:980px){
 .head{min-height:72px;padding:8px 0}
 .topbar .wrap{min-height:34px}
 nav.menu{display:none}
 nav.menu.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line-on-navy);padding:20px var(--pad);flex-direction:column;gap:16px}
 .burger{display:block}.head{position:relative}
}

/* ==========================================================================
   HERO — refined (brandbook pattern as an integrated field, product-first)
   ========================================================================== */
.has-brand-field{position:relative;overflow:hidden}
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;min-height:100vh;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 42%,rgba(0,136,207,.20) 0%,rgba(0,90,169,.10) 34%,rgba(0,47,102,0) 66%)}
/* the official interlocking ribbon pattern, large scale, fading smoothly into the navy */
.hero-pattern{position:absolute;top:-6%;right:-4%;width:64%;height:112%;pointer-events:none;
  background-image:url("../assets/tc-pattern-blue.png");background-repeat:no-repeat;background-size:118% auto;background-position:72% 50%;
  opacity:.10;
  -webkit-mask-image:radial-gradient(120% 88% at 74% 46%,#000 0%,rgba(0,0,0,.72) 44%,rgba(0,0,0,.22) 68%,transparent 86%),
                     linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 16%,#000 42%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(120% 88% at 74% 46%,#000 0%,rgba(0,0,0,.72) 44%,rgba(0,0,0,.22) 68%,transparent 86%),
             linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 16%,#000 42%,#000 100%);
  mask-composite:intersect}
.hero-keylight{position:absolute;left:-8%;top:-30%;width:900px;height:900px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 52% 46%,rgba(255,255,255,.06) 0%,rgba(109,206,245,.05) 34%,rgba(0,47,102,0) 68%)}
.hero .wrap{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:64px;align-items:center;padding-top:84px;padding-bottom:96px}
.hero-eyebrow{display:flex;align-items:center;gap:12px;color:var(--cyan-light)}
.hero-eyebrow::before{content:"";width:26px;height:3px;background:var(--cyan);border-radius:2px;display:block}
.hero .lede{font-size:19px;font-weight:300;line-height:1.72;color:rgba(255,255,255,.84);max-width:560px;margin-top:24px}
.hero-cta{display:flex;gap:16px;margin-top:30px;flex-wrap:wrap}
.hero-cta .btn--outline-light{border-color:rgba(184,228,250,.34)}
/* product presentation: generous space, soft stage glow, believable grounding */
.hero-visual{position:relative;height:500px;display:flex;align-items:center;justify-content:center}
.hero-stage-glow{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:118%;max-width:700px;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(109,206,245,.22) 0%,rgba(0,136,207,.10) 40%,rgba(0,47,102,0) 72%)}
.hero-floor{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:70%;height:64px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,8,22,.72) 0%,rgba(0,8,22,.30) 52%,rgba(0,8,22,0) 80%);filter:blur(9px)}
.hero-visual::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:62%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(184,228,250,0),rgba(184,228,250,.22),rgba(184,228,250,0))}
.hero-product-wrap{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;padding:6px;
  filter:drop-shadow(0 26px 40px rgba(0,6,18,.55)) drop-shadow(0 6px 14px rgba(0,6,18,.35))}

.hero-product{position:relative;max-height:470px;width:auto;object-fit:contain;
  filter:contrast(1.07) saturate(.97) brightness(.98)}
50%{transform:translateY(-5px)}}
html.motionok .hero-product-wrap{animation:floaty 8.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ html.motionok .hero-product-wrap{animation:none} }
@media(max-width:1100px){ .hero-visual{height:440px} .hero-product{max-height:420px} }
@media(max-width:980px){
  .hero{min-height:auto}
  .hero-copy{text-align:left}
  .hero-eyebrow{margin-bottom:6px}
  .hero .tagline{margin-top:16px}
  .hero-cta{gap:14px}
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:26px;padding-top:46px;padding-bottom:74px}
  .hero-visual{height:340px;order:-1}
  .hero-product{max-height:300px}
  .hero-pattern{width:104%;right:-14%;top:-8%;height:78%;background-size:210% auto;background-position:58% 46%;opacity:.085;
    -webkit-mask-image:radial-gradient(96% 80% at 52% 44%,#000 0%,rgba(0,0,0,.5) 52%,transparent 82%);
    mask-image:radial-gradient(96% 80% at 52% 44%,#000 0%,rgba(0,0,0,.5) 52%,transparent 82%)}
}

/* ---------- HERO (brand navy + pattern + tagline) — legacy rules kept below for other sections ---------- */
.has-brand-field{position:relative;overflow:hidden}
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero 
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center;padding-top:78px;padding-bottom:88px;z-index:2}
.tagline{font-size:clamp(38px,4.6vw,74px);line-height:1.02;letter-spacing:-.02em;font-weight:300;text-transform:uppercase}
.tagline b{font-weight:700}
.hero p.lede{font-size:18px;font-weight:300;color:rgba(255,255,255,.82);max-width:520px;margin-top:22px}

.hero-visual img{max-height:410px;width:auto;filter:contrast(1.06) drop-shadow(0 26px 46px rgba(0,20,45,.55));transition:transform var(--d) var(--ease)}
.hero-visual:hover img{transform:translateY(-6px) scale(1.02)}
.hero-note{position:relative;z-index:2;border-top:1px solid var(--line-on-navy);margin-top:54px;padding-top:20px;
  display:flex;gap:34px;flex-wrap:wrap;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(184,228,250,.85)}
@media(max-width:980px){
 .hero .wrap{grid-template-columns:1fr;padding-top:40px;padding-bottom:84px;gap:26px}
 .tagline{font-size:clamp(30px,7.6vw,46px)}
 .hero-note{margin-top:40px}
 .hero-visual{height:300px;order:-1}.hero-visual img{max-height:270px}
}

/* ---------- MARQUEE ---------- */
.strip{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0 30px;position:relative;overflow:hidden}
.strip .lab{padding:0 var(--pad);max-width:var(--maxw);margin:0 auto 16px;color:var(--blue)}
.marquee{position:relative;overflow:hidden;--fade:110px;
  mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
.track{display:flex;gap:20px;width:max-content;animation:slide var(--sp,48s) linear infinite}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 10px),0,0)}}
.marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused}
.m-tile{flex:0 0 auto;width:188px;height:92px;background:#fff;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  padding:12px;box-shadow:0 1px 2px rgba(0,47,102,.05);transition:transform var(--d) var(--ease),box-shadow var(--d) var(--ease)}
.m-tile img{max-height:58px;max-width:min(100%,168px);object-fit:contain;filter:grayscale(1) contrast(1.04);opacity:.72;
  transition:filter var(--d) var(--ease),opacity var(--d) var(--ease),transform var(--d) var(--ease)}
.m-tile:hover,.m-tile:focus-visible{transform:translateY(-3px);box-shadow:var(--sh-2)}
.m-tile:hover img,.m-tile:focus-visible img{filter:grayscale(0);opacity:1;transform:scale(1.05)}

/* ---------- sections ---------- */
.sec{padding:92px 0;position:relative}
.sec--surface{background:var(--surface)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;margin-bottom:42px}
.sec-head h2{font-size:clamp(30px,2.7vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.08}
.sec-head p{max-width:440px;color:#4A5567;font-size:15px}
.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--cyan);margin-bottom:16px}
.kicker i{width:26px;height:3px;background:var(--cyan);display:block;border-radius:2px}