/* --- assets/css/tailwind.css --- */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:JetBrains Mono,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.left-1\/2{left:50%}.left-\[7\%\]{left:7%}.left-\[8\%\]{left:8%}.right-5{right:1.25rem}.right-\[7\%\]{right:7%}.right-\[8\%\]{right:8%}.top-0{top:0}.top-1\/2{top:50%}.top-5{top:1.25rem}.top-6{top:1.5rem}.top-7{top:1.75rem}.z-50{z-index:50}.z-\[1\]{z-index:1}.z-\[70\]{z-index:70}.mx-auto{margin-left:auto;margin-right:auto}.-mr-2{margin-right:-.5rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-9{margin-bottom:2.25rem}.mt-0\.5{margin-top:.125rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-5{margin-top:1.25rem}.mt-8{margin-top:2rem}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.h-0\.5{height:.125rem}.h-1\.5{height:.375rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[14px\]{height:14px}.h-\[18px\]{height:18px}.h-full{height:100%}.max-h-\[80vh\]{max-height:80vh}.min-h-\[80vh\]{min-height:80vh}.w-1\.5{width:.375rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-24{width:6rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-\[14px\]{width:14px}.w-\[18px\]{width:18px}.w-\[40\%\]{width:40%}.w-full{width:100%}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[460px\]{max-width:460px}.max-w-\[900px\]{max-width:900px}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-12{gap:3rem}.gap-14{gap:3.5rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.gap-y-8{row-gap:2rem}.space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-\[32px\]{border-radius:32px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-xl2{border-radius:22px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.\!border-white\/40{border-color:hsla(0,0%,100%,.4)!important}.border-accent\/20{border-color:rgba(40,170,142,.2)}.border-line{--tw-border-opacity:1;border-color:rgb(228 228 224/var(--tw-border-opacity,1))}.border-primary\/20{border-color:hsla(0,0%,4%,.2)}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/15{border-color:hsla(0,0%,100%,.15)}.bg-\[var\(--ink\)\]{background-color:var(--ink)}.bg-accent{--tw-bg-opacity:1;background-color:rgb(40 170 142/var(--tw-bg-opacity,1))}.bg-accent\/10{background-color:rgba(40,170,142,.1)}.bg-accent\/15{background-color:rgba(40,170,142,.15)}.bg-ink\/50{background-color:hsla(0,0%,4%,.5)}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-surface{--tw-bg-opacity:1;background-color:rgb(246 246 244/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-primary\/30{--tw-gradient-from:hsla(0,0%,4%,.3) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,4%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-accent\/40{--tw-gradient-to:rgba(40,170,142,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(40,170,142,.4) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-accent\/30{--tw-gradient-to:rgba(40,170,142,.3) var(--tw-gradient-to-position)}.to-surface{--tw-gradient-to:#f6f6f4 var(--tw-gradient-to-position)}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-16{padding-bottom:4rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}.pl-1\.5{padding-left:.375rem}.pr-3\.5{padding-right:.875rem}.pt-3{padding-top:.75rem}.pt-32{padding-top:8rem}.pt-40{padding-top:10rem}.pt-44{padding-top:11rem}.text-center{text-align:center}.font-display{font-family:Inter Tight,sans-serif}.font-mono{font-family:JetBrains Mono,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[17px\]{font-size:17px}.text-\[40px\]{font-size:40px}.text-\[44px\]{font-size:44px}.text-lg{font-size:1.125rem}.text-lg,.text-xl{line-height:1.75rem}.text-xl{font-size:1.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-\[1\.05\]{line-height:1.05}.leading-\[1\.06\]{line-height:1.06}.leading-\[1\.1\]{line-height:1.1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[\.13em\]{letter-spacing:.13em}.tracking-tight{letter-spacing:-.025em}.\!text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.text-accent{--tw-text-opacity:1;color:rgb(40 170 142/var(--tw-text-opacity,1))}.text-accent-dark{--tw-text-opacity:1;color:rgb(30 122 102/var(--tw-text-opacity,1))}.text-ink{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity,1))}.text-inksoft{--tw-text-opacity:1;color:rgb(91 97 95/var(--tw-text-opacity,1))}.text-muted{--tw-text-opacity:1;color:rgb(138 138 133/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity,1))}.text-primary-dark{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-white\/80{color:hsla(0,0%,100%,.8)}.text-white\/85{color:hsla(0,0%,100%,.85)}.text-white\/90{color:hsla(0,0%,100%,.9)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-4{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-white{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity,1))}.blur{--tw-blur:blur(8px)}.blur,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:border-ink:hover{--tw-border-opacity:1;border-color:rgb(10 10 10/var(--tw-border-opacity,1))}.hover\:\!bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)!important}.hover\:text-ink:hover{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity,1))}.focus\:border-primary:focus{--tw-border-opacity:1;border-color:rgb(10 10 10/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width:640px){.sm\:w-\[26\%\]{width:26%}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:px-14{padding-left:3.5rem;padding-right:3.5rem}.sm\:text-\[44px\]{font-size:44px}.sm\:text-\[46px\]{font-size:46px}.sm\:text-\[54px\]{font-size:54px}.sm\:text-\[56px\]{font-size:56px}}@media (min-width:768px){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:block{display:block}.lg\:w-auto{width:auto}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.lg\:grid-cols-\[42\%_58\%\]{grid-template-columns:42% 58%}.lg\:flex-nowrap{flex-wrap:nowrap}.lg\:justify-between{justify-content:space-between}}
/* --- assets/css/style.css --- */
/* ==========================================================================
   Teamian — design tokens & signature motion
   Palette: monochrome. Paper surface, near-black ink, and teal used only as a
   spark (dots, one highlighted word, small pills) — the same restraint as the
   home page in assets/css/home.css, so inner pages read as the same site.
   Type: Inter Tight (display) / Inter (body) / JetBrains Mono (data figures)

   --primary is deliberately black now rather than a hue: dozens of `text-primary`
   / `btn-primary` usages across the inner pages inherit from here, so this one
   line is what turns the whole site monochrome.
   ========================================================================== */

:root{
  --ink:        #0A0A0A;
  --ink-soft:   #5B615F;
  --muted:      #8A8A85;
  --primary:    #0A0A0A;
  --primary-d:  #000000;
  --accent:     #28AA8E;
  --accent-d:   #1E7A66;
  --line:       #E4E4E0;
  --surface:    #F6F6F4;
  --white:      #FFFFFF;
  --radius-lg:  22px;
  --radius-md:  16px;
  --shadow-soft: 0 20px 45px -18px rgba(10,10,10,.10);
  --shadow-lift: 0 24px 50px -20px rgba(10,10,10,.20);
  --nav-ease:   cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
.font-display{font-family:'Inter Tight',sans-serif;letter-spacing:-.02em}
.font-mono{font-family:'JetBrains Mono',monospace}

::selection{background:var(--accent);color:var(--white)}

:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:6px;
}

/* The highlighted half of a headline. Was a blue→teal gradient; now flat teal,
   matching how the home page marks one word ("Why teams choose Teamian"). */
.grad-text{color:var(--ink-soft)}

/* ==========================================================================
   Resizable nav
   At rest it's a solid full-width white bar with a hairline bottom edge. Past
   60px of scroll that bar fades out and the inner shell contracts into a
   floating frosted pill. assets/js/main.js toggles #site-nav.is-compact — if
   JS never runs the bar simply stays as the full-width bar, which is a
   perfectly usable resting state.
   ========================================================================== */
#site-nav{
  padding:0 16px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background-color .35s ease, border-color .35s ease;
}
/* hand the background over to the pill */
#site-nav.is-compact{
  background:transparent;
  border-bottom-color:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.nav-shell{
  position:relative;                /* the mega panels anchor to this */
  width:100%;max-width:1280px;margin:0 auto;
  padding:0 18px;
  border:1px solid transparent;
  border-radius:9999px;
  transition:
    width .6s var(--nav-ease),
    transform .6s var(--nav-ease),
    background-color .35s ease,
    border-color .35s ease,
    box-shadow .5s ease,
    backdrop-filter .35s ease;
}
.nav-bar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:76px;
  transition:height .5s var(--nav-ease);
}

#site-nav.is-compact .nav-shell{
  transform:translateY(12px);
  /* Heavier than the dark original it's adapted from: on a light page the
     content sliding under the pill is dark, and at .72 the headings behind it
     bled through the logo badly. */
  background:rgba(255,255,255,.88);
  border-color:var(--line);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 8px 24px rgba(11,17,32,.08),
    0 24px 64px rgba(11,17,32,.07);
}
#site-nav.is-compact .nav-bar{height:64px}
/* Contract the width only where there's room for it — narrower than this the
   pill would outgrow the viewport and force a horizontal scrollbar.
   A fixed target, not a percentage: a percentage grows with the viewport, so on
   a 1920 screen the "contracted" pill came out barely narrower than the
   full-width bar and the whole effect disappeared on big monitors. */
@media (min-width:1024px){
  #site-nav.is-compact .nav-shell{width:min(880px,100%)}
}

/* Mobile sheet sits below the pill as its own card, since the bar itself is
   transparent and can't host it. */
#mobile-menu{
  max-width:1280px;margin:10px auto 0;
  background:#fff;
  border:1px solid var(--line);border-radius:20px;
  box-shadow:0 20px 50px rgba(11,17,32,.13);
}
/* single-line labels here, so centre them against the tile */
#mobile-menu .mega-item{align-items:center}

/* ---------- Brand lockup ----------
   Height is the only dial you need. Note the wordmark is just ~19% of the
   artwork's height (the starburst sets the full height), so dropping much
   below 32px leaves "TEAMIAN" too small to read. */
.site-logo{display:inline-flex;align-items:center}
.site-logo img{height:var(--logo-h,40px);width:auto;display:block}

/* ---------- Nav links ---------- */
.nav-link,.nav-trigger{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 14px;border-radius:9999px;
  transition:color .2s ease, background-color .2s ease;
}
.nav-link:hover,.nav-trigger:hover,
.nav-mega:hover .nav-trigger,
.nav-mega.is-open .nav-trigger{color:var(--ink);background:rgba(11,17,32,.055)}
.nav-trigger svg{width:13px;height:13px;transition:transform .3s var(--nav-ease)}
.nav-mega:hover .nav-trigger svg,
.nav-mega.is-open .nav-trigger svg{transform:rotate(180deg)}

/* Menu items span the full bar height. Without this the <li> is only as tall as
   its own text, leaving dead space between the label and the bottom of the bar
   that drops :hover the moment you head down toward the panel. */
.nav-bar > ul{align-self:stretch}
/* align-self on the <li> as well — the <ul> carries Tailwind's items-center,
   which would otherwise shrink each item back to its own text height. */
.nav-bar > ul > li{align-self:stretch;display:flex;align-items:center}
/* Deliberately NOT position:relative — the panel is centred on .nav-shell so it
   tracks the pill as it contracts, instead of hanging off its own menu item. */

/* ---------- Mega menu ---------- */
.mega-panel{
  position:absolute;top:100%;left:50%;
  width:min(940px,calc(100vw - 32px));
  margin-top:10px;
  transform:translateX(-50%) translateY(-8px);
  opacity:0;visibility:hidden;pointer-events:none;
  border:1px solid var(--line);border-radius:22px;
  /* Near-solid: the dark original could afford .94 because what showed
     through was dark too. Over a light page, blurred body copy ghosted
     straight through the product rows. */
  background:rgba(255,255,255,.985);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 24px 70px rgba(11,17,32,.18);
  transition:opacity .28s ease, transform .38s var(--nav-ease), visibility .28s;
  z-index:60;
}
/* .is-open is set by assets/js/main.js and lingers ~220ms after the pointer
   leaves, which is what makes the gap crossable. :hover and :focus-within are
   kept so the menu still opens with no JS and from the keyboard. */
.nav-mega.is-open .mega-panel,
.nav-mega:hover .mega-panel,
.nav-mega:focus-within .mega-panel{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
/* Invisible bridge across the gap. It has to be a child of the panel itself so
   that entering it counts as entering the panel — but that only works while the
   panel is still interactive, hence the JS close delay above. */
.mega-panel::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}

.mega-inner{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:20px;padding:20px}
.mega-label{
  margin:2px 0 12px 10px;
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);
}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px;border-radius:14px;
  transition:background-color .2s ease;
}
.mega-item:hover,.mega-item:focus-visible{background:rgba(11,17,32,.055);outline:none}
.mega-tile{
  flex:0 0 auto;display:grid;place-items:center;
  width:36px;height:36px;
  border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mega-item:hover .mega-tile,
.mega-item:focus-visible .mega-tile{background:var(--ink);color:#fff;border-color:var(--ink)}
.mega-t{display:block;font-size:14px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.mega-d{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.mega-foot{
  display:inline-flex;align-items:center;gap:7px;
  margin:12px 0 2px 10px;
  font-size:13.5px;font-weight:600;color:var(--ink);
}
.mega-foot svg{transition:transform .25s var(--nav-ease)}
.mega-foot:hover svg{transform:translateX(4px)}

/* ---------- Compact panel (Solutions, Resources) ----------
   One narrow column that hangs under its own trigger, rather than the 940px
   panel centred on .nav-shell. That needs position:relative on the <li> — the
   note at the top of this section explains why the wide panel deliberately
   does without it, but a narrow panel has to track its trigger, not the pill. */
.nav-mega--compact{position:relative}
.mega-panel--compact{
  left:0;width:338px;
  border-radius:16px;
  transform:translateY(-8px);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 18px 50px rgba(11,17,32,.16);
}
.nav-mega--compact.is-open .mega-panel--compact,
.nav-mega--compact:hover .mega-panel--compact,
.nav-mega--compact:focus-within .mega-panel--compact{transform:translateY(0)}
.mega-inner--compact{grid-template-columns:1fr;gap:0;padding:16px}
.mega-grid--compact{grid-template-columns:1fr;gap:2px}

/* Full-width dark button closing the compact panel, in place of .mega-foot's
   quiet text link — it is the one emphatic surface in a small white card. */
.mega-cta{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:29px 2px 2px;padding:13px 18px;
  border-radius:12px;
  background:var(--ink);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  transition:background-color .2s ease, transform .25s var(--nav-ease);
}
.mega-cta:hover{background:#000;transform:translateY(-1px)}
.mega-cta svg{transition:transform .25s var(--nav-ease)}
.mega-cta:hover svg{transform:translateX(4px)}
/* Divider drawn by the button rather than as a border on the row list above it:
   the Resources panel has rows but no button, and a border there left a hairline
   dangling under the last row with nothing beneath it. This way the rule cannot
   outlive the thing it separates. */
.mega-cta::before{
  content:'';position:absolute;left:-2px;right:-2px;top:-15px;
  height:1px;background:var(--line);
}

/* Promo card — inverted, the one bold surface in an otherwise white panel */
.mega-feature{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px;border-radius:16px;
  background:var(--ink);color:#fff;
  transition:transform .3s var(--nav-ease);
}
.mega-feature:hover{transform:translateY(-2px)}
.mega-feature__ico{
  display:grid;place-items:center;width:34px;height:34px;
  margin-bottom:auto;border-radius:10px;
  background:#fff;color:var(--ink);
}
.mega-feature__t{display:block;margin-top:22px;font-size:15px;font-weight:700;letter-spacing:-.015em}
.mega-feature__d{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.62)}
.mega-feature__cta{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:14px;font-size:13px;font-weight:600;color:#fff;
}
.mega-feature__cta svg{transition:transform .25s var(--nav-ease)}
.mega-feature:hover .mega-feature__cta svg{transform:translateX(4px)}

/* Below this the panel is too narrow to carry the promo card beside the grid */
@media (max-width:1023px){
  .mega-inner{grid-template-columns:1fr}
  .mega-feature{display:none}
}

/* ---------- Scroll reveal ---------- */
/* Content is visible by default. Only when JS is running (html.has-js) do we
   hide .reveal elements and fade them in — so a JS/network failure never
   leaves the page blank in production. */
.reveal{
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.has-js .reveal{
  opacity:0;
  transform:translateY(18px);
}
.has-js .reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-stagger > *{transition-delay:calc(var(--i, 0) * 90ms)}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto !important}
}

/* ==========================================================================
   Signature element: the "AI Orbit"
   Channel chips revolve on rotating rings around a pulsing Teamian-AI core,
   with floating glass stat cards and a drifting aurora glow behind it.
   Pure CSS motion — a premium, always-alive hero visual.
   ========================================================================== */
.orbit-scene{
  position:relative;
  height:540px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* soft brand-colored aurora, gently drifting */
.orbit-aurora{
  position:absolute;
  inset:-6%;
  z-index:0;
  background:
    radial-gradient(42% 42% at 32% 34%, rgba(37,84,255,.28), transparent 70%),
    radial-gradient(40% 40% at 72% 66%, rgba(0,194,168,.24), transparent 72%),
    radial-gradient(38% 38% at 60% 22%, rgba(124,58,237,.16), transparent 72%);
  filter:blur(18px);
  animation:aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%  {transform:translate3d(-2%,-1%,0) scale(1)}
  100%{transform:translate3d(3%,2%,0) scale(1.08)}
}

/* ---- rotating rings ---- */
.orbit-ring{
  position:absolute;
  inset:0;margin:auto;
  border-radius:50%;
  border:1px dashed rgba(37,84,255,.18);
  animation:orbit-spin var(--dur) linear infinite;
  z-index:1;
}
.orbit-ring.rev{animation-direction:reverse}
.ring-1{width:380px;height:380px}
.ring-2{width:264px;height:264px;border-color:rgba(0,194,168,.22)}
.ring-3{width:476px;height:476px;border-color:rgba(11,17,32,.06)}

@keyframes orbit-spin{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}

/* a node is placed on the ring edge; inner layers keep the chip upright */
.orbit-node{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r)));
}
/* counter-rotate the ring's spin so chips never tumble */
.orbit-spin{
  display:block;
  animation:orbit-spin var(--dur) linear infinite reverse;
}
.orbit-spin.rev{animation-direction:normal}

.orbit-chip{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;
  /* undo the node's placement rotation so the icon sits level */
  transform:rotate(calc(-1 * var(--a)));
  background:var(--white);
  border:1px solid var(--line);
  border-radius:17px;
  box-shadow:0 12px 26px -12px rgba(11,17,32,.30), 0 2px 6px -3px rgba(11,17,32,.2);
}
.orbit-chip svg{width:24px;height:24px}

/* ---- pulsing AI core ---- */
.orbit-core{
  position:relative;z-index:3;
  width:150px;height:150px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-align:center;
  background:radial-gradient(circle at 32% 28%, #3B63FF 0%, #1739C4 52%, #0B1120 100%);
  box-shadow:
    0 0 0 10px rgba(37,84,255,.08),
    0 24px 60px -18px rgba(37,84,255,.65),
    inset 0 2px 10px rgba(255,255,255,.25);
  animation:core-breathe 4.5s ease-in-out infinite;
}
@keyframes core-breathe{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.05)}
}
.orbit-core__label{
  position:relative;z-index:2;
  font-family:'Sora',sans-serif;font-weight:600;
  font-size:15px;line-height:1.15;letter-spacing:.02em;
}
.orbit-core__label b{font-size:26px;font-weight:800}
/* expanding pulse ring */
.orbit-core__ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(0,194,168,.55);
  animation:core-pulse 3s ease-out infinite;
}
@keyframes core-pulse{
  0%  {transform:scale(1);opacity:.7}
  100%{transform:scale(1.9);opacity:0}
}
/* rotating conic sheen inside the core */
.orbit-core__sweep{
  position:absolute;inset:-30%;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 55%, rgba(0,194,168,.55) 75%, transparent 92%);
  animation:orbit-spin 6s linear infinite;
  mix-blend-mode:screen;opacity:.7;
}

/* ---- floating glass stat cards ---- */
.orbit-card{
  position:absolute;z-index:4;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  border-radius:14px;
  padding:11px 14px;
  box-shadow:0 20px 45px -18px rgba(11,17,32,.32);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.orbit-card--a{top:12%;left:-4%;animation:float-a 6s ease-in-out infinite}
.orbit-card--b{bottom:12%;right:-3%;animation:float-b 7s ease-in-out infinite}
@keyframes float-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes float-b{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}

.orbit-card__dot{
  width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(0,194,168,.6);animation:pulse 2.2s infinite;
}
.orbit-card__t{font-family:'Sora',sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.orbit-card__s{font-size:12px;color:var(--muted)}
.orbit-card__up{color:var(--accent-d);font-family:'JetBrains Mono',monospace;font-weight:600}

@media (prefers-reduced-motion: reduce){
  .orbit-ring,.orbit-spin,.orbit-core,.orbit-core__ring,.orbit-core__sweep,
  .orbit-aurora,.orbit-card--a,.orbit-card--b{animation:none}
}

@media (max-width: 1024px){
  .orbit-scene{height:460px}
  .ring-3{display:none}
  .ring-1{width:330px;height:330px}
  .orbit-node[style*="190px"]{--r:165px}
}
@media (max-width: 640px){
  .orbit-scene{height:380px;transform:scale(.86)}
  .orbit-card--a{left:0}
  .orbit-card--b{right:0}
}

/* ==========================================================================
   "Communication Hub" — a live unified-inbox mockup. Conversations from every
   channel roll in continuously; one shows a typing indicator; Teamian AI
   drafts replies below. Reads as the real product.
   ========================================================================== */
.hub{
  position:relative;
  min-height:460px;
  display:flex;align-items:center;justify-content:center;
}
.hub-glow{
  position:absolute;inset:5% 3%;z-index:0;
  background:
    radial-gradient(45% 45% at 28% 24%, rgba(37,84,255,.20), transparent 70%),
    radial-gradient(45% 45% at 76% 78%, rgba(0,194,168,.18), transparent 72%);
  filter:blur(16px);
}

.hub-inbox{
  position:relative;z-index:1;
  width:min(372px,100%);
  background:#fff;border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-lift);
  padding:18px;
  animation:hub-float 6.5s ease-in-out infinite;
}
@keyframes hub-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.hub-inbox__head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.hub-inbox__title{font-family:'Sora',sans-serif;font-weight:700;font-size:15px}
.hub-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent-d)}
.hub-live i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.2s infinite}

.hub-feed{
  position:relative;height:252px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.hub-feed__track{
  display:flex;flex-direction:column;gap:12px;padding-top:10px;
  animation:hub-roll 20s linear infinite;
}
.hub:hover .hub-feed__track{animation-play-state:paused}
@keyframes hub-roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.hub-msg{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:11px 12px;
}
.hub-ava{
  width:34px;height:34px;flex:0 0 auto;border-radius:11px;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.hub-ava--wa{background:#25D366}
.hub-ava--ig{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF)}
.hub-ava--em{background:var(--primary)}
.hub-ava--li{background:#0A66C2}
.hub-msg__body{min-width:0;flex:1}
.hub-msg__top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.hub-msg__top b{
  font-family:'Sora',sans-serif;font-weight:600;font-size:12.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hub-ch{flex:0 0 auto;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px}
.hub-ch--wa{background:rgba(37,211,102,.15);color:#128C3E}
.hub-ch--ig{background:rgba(221,42,123,.12);color:#C21B6A}
.hub-ch--em{background:rgba(37,84,255,.12);color:var(--primary-d)}
.hub-ch--li{background:rgba(10,102,194,.12);color:#0A66C2}
.hub-msg__body p{font-size:13px;color:var(--ink-soft);line-height:1.35;margin:0}

.hub-dots{display:inline-flex;gap:4px;padding:5px 0}
.hub-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:hub-typing 1.3s infinite}
.hub-dots i:nth-child(2){animation-delay:.18s}
.hub-dots i:nth-child(3){animation-delay:.36s}
@keyframes hub-typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.hub-ai{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:14px;padding:12px 13px;border-radius:14px;
  background:linear-gradient(100deg, rgba(37,84,255,.08), rgba(0,194,168,.1));
  border:1px solid var(--line);
  font-size:13px;color:var(--ink-soft);
}
.hub-ai__badge{font-family:'Sora',sans-serif;font-weight:700;font-size:12.5px;color:var(--primary-d)}

.hub-chip{
  position:absolute;z-index:2;
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;color:var(--primary);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);
}
.hub-chip--1{top:7%;left:1%;animation:hub-float 5s ease-in-out infinite}
.hub-chip--2{bottom:9%;right:2%;animation:hub-float 7s ease-in-out infinite .6s}

@media (prefers-reduced-motion: reduce){
  .hub-inbox,.hub-feed__track,.hub-chip,.hub-live i,.hub-dots i{animation:none}
}
@media (max-width: 640px){
  .hub{min-height:410px}
  .hub-chip{display:none}
}

/* ==========================================================================
   "Ecosystem" — module cards feeding a glowing central hub, with animated
   connector lines showing data flowing into one shared database.
   ========================================================================== */
.eco{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:28px;
  background:linear-gradient(180deg,#ffffff,var(--surface));
  padding:44px 40px;
}
.eco-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at 50% 50%, rgba(10,10,10,.055), transparent 70%),
    radial-gradient(30% 40% at 84% 16%, rgba(40,170,142,.09), transparent 72%);
}
.eco-links{
  position:absolute;left:40px;top:44px;
  width:calc(100% - 80px);height:calc(100% - 88px);
  z-index:0;overflow:visible;pointer-events:none;
}
.eco-links line{
  stroke:#DBDBD6;stroke-width:.45;stroke-dasharray:3 5;stroke-linecap:round;
  animation:eco-flow 1.1s linear infinite;
}
@keyframes eco-flow{to{stroke-dashoffset:-8}}
.eco-grid{position:relative;z-index:1}

.eco-hub{
  position:relative;overflow:hidden;
  border-radius:26px;min-height:236px;color:#fff;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 28px 60px -22px rgba(10,10,10,.5);
  animation:hub-float 6s ease-in-out infinite;
}
.eco-hub__ring{
  position:absolute;left:50%;top:50%;width:150px;height:150px;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1.5px solid rgba(40,170,142,.45);
  animation:core-pulse 3s ease-out infinite;
}
.eco-hub__sweep{
  position:absolute;left:50%;top:50%;width:340px;height:340px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 60%,rgba(40,170,142,.4) 78%,transparent 92%);
  animation:orbit-spin 7s linear infinite;mix-blend-mode:screen;opacity:.6;
}

@media (prefers-reduced-motion: reduce){
  .eco-hub,.eco-hub__ring,.eco-hub__sweep,.eco-links line{animation:none}
}
@media (max-width: 1024px){
  .eco-links{display:none}
  .eco{padding:32px 24px}
}

/* ==========================================================================
   "Why teams choose Teamian" — soft animated background: drifting brand blobs
   over a faint dot grid. Sits behind the cards, never competes with them.
   ========================================================================== */
.why-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  /* faint dot grid */
  background-image:radial-gradient(rgba(37,84,255,.07) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 55%, transparent 100%);
          mask-image:radial-gradient(120% 90% at 50% 40%, #000 55%, transparent 100%);
}
.why-blob{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;
  will-change:transform;
}
.why-blob--1{
  width:420px;height:420px;left:-80px;top:-60px;
  background:radial-gradient(circle, rgba(37,84,255,.35), transparent 70%);
  animation:why-drift-1 20s ease-in-out infinite alternate;
}
.why-blob--2{
  width:380px;height:380px;right:-70px;top:40px;
  background:radial-gradient(circle, rgba(0,194,168,.32), transparent 70%);
  animation:why-drift-2 24s ease-in-out infinite alternate;
}
.why-blob--3{
  width:340px;height:340px;left:45%;bottom:-120px;
  background:radial-gradient(circle, rgba(124,58,237,.24), transparent 70%);
  animation:why-drift-3 27s ease-in-out infinite alternate;
}
@keyframes why-drift-1{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,50px) scale(1.15)}}
@keyframes why-drift-2{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,60px) scale(1.1)}}
@keyframes why-drift-3{from{transform:translate(0,0) scale(1)}to{transform:translate(-50px,-40px) scale(1.18)}}

@media (prefers-reduced-motion: reduce){
  .why-blob{animation:none}
}

/* ==========================================================================
   Solutions hero — the department "constellation" map (animated).
   ========================================================================== */
.sol-map__glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(44% 44% at 50% 50%, rgba(10,10,10,.06), transparent 70%);
}
/* lines stay static so chips never detach from them */
.sol-line{stroke:#DBDBD6;stroke-width:.6;stroke-linecap:round}
.sol-core__ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(40,170,142,.45);
  animation:core-pulse 3s ease-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .sol-core__ring{animation:none}
}

/* ==========================================================================
   WhatsApp chat mock — messages pop in on a loop, with typing dots,
   an "online" pulse and blue delivery ticks.
   ========================================================================== */
.wa-online{
  width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(40,170,142,.7);animation:pulse 2.2s infinite;
}
.wa-body{
  background:#EFEFEB;                     /* chat paper, toned to the site */
  display:flex;flex-direction:column;
  min-height:360px;
}
.wa-bubble{
  position:relative;
  max-width:82%;
  padding:9px 12px 7px;
  border-radius:14px;
  font-size:14px;line-height:1.45;color:var(--ink);
  box-shadow:0 1px 1px rgba(10,10,10,.08);
  opacity:0;
  animation:wa-pop 11s ease-in-out infinite;
  animation-delay:var(--d);
}
.wa-in{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.wa-out{align-self:flex-end;background:rgba(40,170,142,.14);border-top-right-radius:4px}
.wa-time{
  display:block;text-align:right;margin-top:3px;
  font-size:10.5px;color:var(--muted);
}
.wa-tick{color:var(--accent-d);font-weight:700;letter-spacing:-1px}

@keyframes wa-pop{
  0%   {opacity:0;transform:translateY(12px) scale(.96)}
  4%   {opacity:1;transform:translateY(0) scale(1)}
  92%  {opacity:1;transform:translateY(0)}
  98%  {opacity:0;transform:translateY(-6px)}
  100% {opacity:0}
}

/* typing indicator */
.wa-typing{padding:12px 14px}
.wa-dots{display:inline-flex;gap:4px}
.wa-dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:wa-type 1.3s infinite}
.wa-dots i:nth-child(2){animation-delay:.18s}
.wa-dots i:nth-child(3){animation-delay:.36s}
@keyframes wa-type{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

@media (prefers-reduced-motion: reduce){
  .wa-bubble{opacity:1;animation:none}
  .wa-online,.wa-dots i{animation:none}
}

/* ==========================================================================
   Reusable mock animations (per-page hero visuals)
   ========================================================================== */
/* sequential "process running" reveal — rows/bubbles pop in on a loop */
.seq-item{opacity:0;animation:seq-in 8s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes seq-in{
  0%   {opacity:0;transform:translateY(10px)}
  5%   {opacity:1;transform:translateY(0)}
  90%  {opacity:1;transform:translateY(0)}
  97%  {opacity:0;transform:translateY(-6px)}
  100% {opacity:0}
}

/* auto-filling progress bar (scaleX so it works at any width) */
.bar-fill{transform-origin:left;animation:bar-grow 8s ease-in-out infinite}
@keyframes bar-grow{0%{transform:scaleX(0)}30%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* three bouncing dots (typing / processing) */
.dots{display:inline-flex;gap:4px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:wa-type 1.3s infinite}
.dots i:nth-child(2){animation-delay:.18s}
.dots i:nth-child(3){animation-delay:.36s}

/* AI-calling: pulsing call ring + voice waveform */
.call-ring{position:relative}
.call-ring::before,.call-ring::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(40,170,142,.45);animation:call-pulse 2.4s ease-out infinite;
}
.call-ring::after{animation-delay:1.2s}
@keyframes call-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2);opacity:0}}
.wave{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:30px}
.wave i{width:3.5px;border-radius:3px;background:var(--accent);height:8px;animation:wave 1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.1s}.wave i:nth-child(3){animation-delay:.2s}
.wave i:nth-child(4){animation-delay:.3s}.wave i:nth-child(5){animation-delay:.4s}
.wave i:nth-child(6){animation-delay:.5s}.wave i:nth-child(7){animation-delay:.6s}
.wave i:nth-child(8){animation-delay:.7s}.wave i:nth-child(9){animation-delay:.8s}
@keyframes wave{0%,100%{height:7px}50%{height:28px}}

@media (prefers-reduced-motion: reduce){
  .seq-item{opacity:1;animation:none}
  .bar-fill{animation:none}
  .dots i,.call-ring::before,.call-ring::after,.wave i{animation:none}
}

.shadow-soft{box-shadow:var(--shadow-soft)}
.shadow-lift{box-shadow:var(--shadow-lift)}

/* ---------- Feature / capability cards ---------- */
.tm-card{
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.tm-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lift);
  border-color:transparent;
}

/* ---------- AI panel (contained accent, page stays white) ---------- */
/* The site's one dark surface — same flat ink as the footer and the mega
   menu's promo card, instead of the old indigo gradient. */
.ai-panel{
  background:var(--ink);
  color:#fff;
  border-radius:28px;
  overflow:hidden;
  position:relative;
}
.ai-panel::before{
  content:'';
  position:absolute;
  width:420px;height:420px;
  background:radial-gradient(circle, rgba(40,170,142,.14), transparent 70%);
  top:-140px;right:-100px;
}
.ai-glass{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(10px);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;border-radius:12px;padding:13px 24px;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-ghost{
  background:transparent;color:var(--ink);border:1px solid var(--line);
}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:#ECECE8}

/* Black button whose white fill grows out of the point the cursor entered.
   assets/js/main.js writes --bx/--by; without JS the fill starts from the
   centre, so the hover still works.

   The disc sits ON TOP of the label and blends with 'difference', so it
   inverts whatever it covers: black ground turns white, white letters turn
   black. That keeps the label readable at every frame of the sweep — fading
   the text colour on a timer always leaves it invisible somewhere mid-way. */
.btn-ink,.btn-primary{
  position:relative;
  isolation:isolate;                  /* blend against this button only */
  overflow:hidden;
  background:#0A0A0A;color:#fff;
  box-shadow:0 14px 30px -12px rgba(10,10,10,.45);
}
.btn-ink::before,.btn-primary::before{
  content:"";
  position:absolute;
  left:var(--bx,50%);top:var(--by,50%);
  width:250%;aspect-ratio:1;          /* wide enough to reach any corner */
  border-radius:50%;
  background:#fff;
  mix-blend-mode:difference;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  /* Asymmetric on purpose: a transition belongs to the state being moved TO,
     so this short one only ever runs on the way out. A slow retract reads as
     a second animation and draws the eye to the cursor leaving. */
  transition:transform .2s ease-in;
}
.btn-ink:hover,.btn-primary:hover,
.btn-ink:focus-visible,.btn-primary:focus-visible{transform:translateY(-2px)}
.btn-ink:hover::before,.btn-primary:hover::before,
.btn-ink:focus-visible::before,.btn-primary:focus-visible::before{
  transform:translate(-50%,-50%) scale(1);
  transition:transform .95s cubic-bezier(.22,.68,.16,1);
}

@media (prefers-reduced-motion:reduce){
  .btn-ink::before,.btn-primary::before{transition:none}
  .btn-ink:hover,.btn-ink:focus-visible,
  .btn-primary:hover,.btn-primary:focus-visible{transform:none}
}

/* ---------- Modal ---------- */
.tm-modal{transition:opacity .25s ease}
.tm-modal[hidden]{display:none}
.tm-modal-panel{
  transform:translateY(14px) scale(.98);
  opacity:0;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.tm-modal.is-open .tm-modal-panel{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* ---------- Toast ---------- */
#tm-toast{
  position:fixed;bottom:24px;right:24px;z-index:80;
  transform:translateY(20px);opacity:0;pointer-events:none;
  transition:transform .3s ease, opacity .3s ease;
}
#tm-toast.show{transform:translateY(0);opacity:1}

/* Step numbers for the genuinely-sequential "how it works" section */
.step-num{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  letter-spacing:.05em;
  color:var(--accent-d);
}

.marquee-track{
  display:flex;gap:48px;
  animation:marquee 26s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* =========================================================
   SITE FOOTER  (namespace: tmnft-)
   Monochrome DevStudio layout. Self-contained — its own palette
   and box-sizing, so it doesn't lean on Tailwind utilities.
   ========================================================= */
.tmnft{
  --tmnft-bg:#0A0A0A;
  --tmnft-ink:#FFFFFF;
  --tmnft-muted:#8A8A8A;
  --tmnft-line:rgba(255,255,255,.08);
  --tmnft-mark-a:#757575;   /* wordmark gradient — top (white) */
  --tmnft-mark-b:#FFFFFF;   /* wordmark gradient — bottom (neutral gray) */
  --tmnft-mark-o:.3;        /* how loud the wordmark reads on the black */
  --tmnft-gutter:24px;

  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--tmnft-bg);
  color:var(--tmnft-ink);
  border-top:1px solid var(--tmnft-line);
  position:relative;
  -webkit-font-smoothing:antialiased;
}
.tmnft *{box-sizing:border-box}

.tmnft__inner{
  max-width:1120px;
  margin:0 auto;
  padding:88px var(--tmnft-gutter) 40px;
}

/* ---- top grid: brand + link columns ---- */
.tmnft__grid{
  display:grid;
  grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(120px,.85fr));
  gap:40px 32px;
  align-items:start;
}

.tmnft__brand{display:inline-flex;align-items:center}
/* White-on-transparent lockup — the wordmark is part of the artwork, so there
   is no separate text label here. */
.tmnft__logoimg{height:55px;width:auto;display:block}
.tmnft__copy{
  margin:26px 0 0;
  font-size:14px;line-height:1.6;font-weight:400;
  color:var(--tmnft-muted);
}
.tmnft__legal{
  margin:14px 0 0;
  display:flex;align-items:center;gap:10px;
  font-size:14px;
  color:rgba(255,255,255,.22);
}

.tmnft__colhead{
  margin:0 0 22px;
  font-size:14px;font-weight:600;letter-spacing:-.005em;
  color:var(--tmnft-ink);
}
.tmnft__list{list-style:none;margin:0;padding:0}
.tmnft__list li + li{margin-top:14px}
.tmnft__link{
  font-size:14px;font-weight:400;line-height:1.4;
  color:var(--tmnft-muted);
  text-decoration:none;
  transition:color .18s ease;
}
.tmnft__link:hover,
.tmnft__link:focus-visible{color:var(--tmnft-ink)}
.tmnft__link:focus-visible{
  outline:1px solid var(--tmnft-ink);
  outline-offset:3px;border-radius:3px;
}

/* ---- oversized wordmark: locks edge to edge inside the gutters ---- */
.tmnft__mark{
  margin-top:104px;
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-select:none;
  overflow:visible;
}
.tmnft__mark text{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:800;
  font-size:272px;
  letter-spacing:-.045em;
  /* fill is a gradient set on the <text> in the markup — a url(#id) written
     here would resolve against this stylesheet, not the page, in Firefox */
  opacity:var(--tmnft-mark-o);
}
/* white at the top edge of the letters, cement at the baseline */
.tmnft__mark .tmnft__stop-a{stop-color:var(--tmnft-mark-a)}
.tmnft__mark .tmnft__stop-b{stop-color:var(--tmnft-mark-b)}

/* ---- responsive ---- */
@media (max-width:900px){
  .tmnft__inner{padding-top:64px}
  .tmnft__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:36px 24px;
  }
  .tmnft__brand-block{grid-column:1 / -1}
  .tmnft__mark{margin-top:72px}
}
@media (max-width:480px){
  .tmnft__inner{--tmnft-gutter:20px;padding-bottom:32px}
  .tmnft__colhead{margin-bottom:16px}
  .tmnft__list li + li{margin-top:12px}
  .tmnft__mark{margin-top:56px}
}

/* ---------- Icon tile ----------
   Replaces the per-product gradient squares the inner pages used to carry.
   Same language as the mega menu's .mega-tile: quiet by default, inverts to
   ink when its card is hovered, so colour is never doing the work. */
.tm-tile{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1px solid var(--line);border-radius:14px;
  background:var(--surface);color:var(--ink);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.tm-card:hover .tm-tile,
a:hover > .tm-tile,
.tm-tile-invert{background:var(--ink);color:#fff;border-color:var(--ink)}
/* on the dark ai-panel the tile has to flip the other way */
.ai-panel .tm-tile{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;
}

/* --- assets/css/teamian-consent.css --- */
/* ==========================================================================
   COOKIE CONSENT BANNER  (design: assets/html/teamian-cookie-popup (1).html)

   Loaded on every page as part of the core bundle (see includes/header.php),
   because the banner has to be able to appear anywhere. Its markup lives in
   includes/footer.php and its behaviour at the bottom of assets/js/main.js.

   Needs no namespace: every selector in the mock is already prefixed tc-. The
   only things dropped were the mock's demo scaffolding — the `*` box-sizing
   reset and the `body` rule that gave the standalone file a grey page. Both
   would have leaked across the whole site, since this file loads everywhere.
   ========================================================================== */

  /* ============================================================
     COOKIE CONSENT POPUP — Teamian
     Drop the <style>, <aside>, and <script> blocks into your site
     ============================================================ */

  :root {
    --tc-black: #000000;
    --tc-near-black: #0a0a0a;
    --tc-ink: #111111;
    --tc-smoke: #4b4b4b;
    --tc-mid: #737373;
    --tc-hair: #d4d4d4;
    --tc-whisper: #ededed;
    --tc-paper: #fafafa;
    --tc-white: #ffffff;
    --tc-teal: #14D3B0;
    --tc-teal-deep: #0d9488;
  }

  .tc-consent {
    position: fixed;
    left: 50%;
    bottom: clamp(16px, 3vw, 32px);
    transform: translateX(-50%) translateY(24px);
    width: min(calc(100% - 32px), 720px);
    background: var(--tc-white);
    color: var(--tc-ink);
    border: 1px solid var(--tc-whisper);
    box-shadow:
      0 1px 2px rgba(0,0,0,0.04),
      0 12px 32px -8px rgba(0,0,0,0.12),
      0 32px 64px -16px rgba(0,0,0,0.08);
    padding: 24px 28px;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 24px;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s cubic-bezier(0.19, 1, 0.22, 1),
                transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 100;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }
  .tc-consent.tc-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
  .tc-consent.tc-dismissed {
    opacity: 0;
    transform: translateX(-50%) translateY(24px);
    pointer-events: none;
  }
  @media (max-width: 620px) {
    .tc-consent {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 22px;
    }
  }

  /* Cookie illustration */
  .tc-consent__mark {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tc-consent__mark svg { width: 100%; height: 100%; display: block; }
  @media (max-width: 620px) {
    .tc-consent__mark { width: 76px; height: 76px; }
  }

  /* Body */
  .tc-consent__body { min-width: 0; }

  .tc-consent__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tc-mid);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .tc-consent__eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--tc-teal);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(20, 211, 176, 0.15);
  }

  .tc-consent__title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--tc-near-black);
    margin-bottom: 6px;
    line-height: 1.3;
  }

  .tc-consent__desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--tc-smoke);
    margin-bottom: 18px;
  }
  .tc-consent__desc a {
    color: var(--tc-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--tc-hair);
    padding-bottom: 1px;
    transition: border-color 0.2s ease;
  }
  .tc-consent__desc a:hover { border-bottom-color: var(--tc-ink); }

  .tc-consent__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }

  .tc-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 10px 18px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    color: var(--tc-ink);
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 0;
  }

  .tc-btn--primary {
    background: var(--tc-black);
    color: var(--tc-white);
    border-color: var(--tc-black);
  }
  .tc-btn--primary:hover {
    background: var(--tc-near-black);
    box-shadow: inset 0 0 0 1px var(--tc-teal), 0 0 0 3px rgba(20, 211, 176, 0.12);
  }

  .tc-btn--ghost {
    border-color: var(--tc-hair);
    color: var(--tc-ink);
  }
  .tc-btn--ghost:hover {
    border-color: var(--tc-ink);
    background: var(--tc-paper);
  }

  .tc-btn--text {
    padding: 10px 4px;
    color: var(--tc-mid);
    text-decoration: none;
    font-size: 12.5px;
    margin-left: auto;
  }
  .tc-btn--text:hover { color: var(--tc-ink); }
  @media (max-width: 620px) {
    .tc-btn--text { margin-left: 0; }
  }

  /* Close button */
  .tc-consent__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-mid);
    transition: color 0.2s ease;
    padding: 0;
  }
  .tc-consent__close:hover { color: var(--tc-ink); }
  .tc-consent__close svg { width: 12px; height: 12px; }

  /* Preferences expanded state */
  .tc-consent__prefs {
    display: none;
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 20px;
    border-top: 1px solid var(--tc-whisper);
  }
  .tc-consent.tc-expanded .tc-consent__prefs { display: block; }
  .tc-consent.tc-expanded .tc-consent__actions {
    padding-top: 20px;
    border-top: 1px solid var(--tc-whisper);
    margin-top: 20px;
    grid-column: 1 / -1;
  }

  .tc-pref {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--tc-whisper);
    align-items: center;
  }
  .tc-pref:last-child { border-bottom: none; }
  .tc-pref__name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tc-near-black);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
  }
  .tc-pref__desc {
    font-size: 12.5px;
    color: var(--tc-mid);
    line-height: 1.5;
  }
  .tc-pref__status {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tc-teal-deep);
    border: 1px solid var(--tc-teal);
    background: rgba(20, 211, 176, 0.04);
    font-weight: 600;
    padding: 4px 8px;
    white-space: nowrap;
  }

  /* Toggle */
  .tc-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    display: inline-block;
    cursor: pointer;
    flex-shrink: 0;
  }
  .tc-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
  .tc-toggle__track {
    position: absolute;
    inset: 0;
    background: var(--tc-hair);
    border-radius: 20px;
    transition: background 0.25s ease;
  }
  .tc-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--tc-white);
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  }
  .tc-toggle input:checked + .tc-toggle__track { background: var(--tc-black); }
  .tc-toggle input:checked + .tc-toggle__track .tc-toggle__thumb { transform: translateX(16px); }