
:root{
  --bg:#000;--ink:#fff;--body:#e3e8ee;--muted:#b9c3cf;
  --line:#29313a;--line2:#414c59;
  --violet:#d99aff;--cyan:#86e9ff;--green:#7af2ba;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box}
html{background:#000;scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;min-width:0;background:#000;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.58;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}
.wrap{width:min(1240px,calc(100% - 64px));margin-inline:auto}

.topline{background:#000;border-bottom:1px solid var(--line);color:#c7d0da;font:11px/1.2 var(--mono);letter-spacing:.05em}
.topline .wrap{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.live{color:#eef2f6}.live:before{content:"●";color:#61e6a5;margin-right:7px}

header{height:76px;background:#000;border-bottom:1px solid var(--line);backdrop-filter:blur(20px);position:sticky;top:0;z-index:50}
.head{height:100%;display:flex;align-items:center;gap:24px;position:relative}
.brand{font-weight:800;font-size:21px;line-height:1;letter-spacing:-.035em;color:#fff;white-space:nowrap}
.brand small{display:block;margin-top:5px;color:#b5c0cb;font:8px/1 var(--mono);letter-spacing:.16em}
.session{margin-left:auto;color:#b9c3ce;font:10px var(--mono);letter-spacing:.06em;white-space:nowrap}
.hamb{flex:0 0 44px;width:44px;height:44px;border:1px solid #596575;border-radius:5px;background:#06080b;color:#fff;cursor:pointer;font-size:20px}
.drawer{display:none;position:absolute;right:0;top:60px;width:min(320px,calc(100vw - 32px));max-height:calc(100vh - 92px);overflow:auto;background:#06080b;border:1px solid #4b5664;box-shadow:0 30px 90px #000;padding:7px;z-index:100}
.drawer.open{display:block}
.drawer a{display:flex;justify-content:space-between;gap:16px;padding:12px;border-bottom:1px solid #202730;color:#f0f3f7;font:12px var(--mono)}
.drawer a:after{content:"↗";color:#a8b3bf}.drawer a:hover{background:#12171d}
.drawer .subscribe{margin-top:7px;background:#fff;color:#000;font-weight:800}

.hero{position:relative;min-height:720px;background:#000;border-bottom:1px solid var(--line);overflow:hidden}
.hero-bg{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;opacity:1;filter:saturate(1.03) contrast(1.07) brightness(.84)}
/* Hero image: full opacity, no transparency. */
.hero:after{content:none!important;display:none!important}
.hero .wrap{position:relative;z-index:2}
.hero-content{padding:88px 0 68px;max-width:760px;text-shadow:none;font:11px var(--mono);letter-spacing:.07em}
.path{margin-bottom:28px}.path b{color:#fff}.kicker{margin-bottom:16px;color:#f3f5f8}
h1{margin:0 0 26px;color:#fff;font-size:clamp(58px,7.4vw,104px);font-weight:820;line-height:.89;letter-spacing:-.066em}
h1 em{color:#fff;font-style:normal}
h2{max-width:750px;margin:0 0 23px;color:#fff;font-size:clamp(25px,3vw,40px);font-weight:520;line-height:1.12;letter-spacing:-.038em}
.hero-copy{max-width:650px;margin:0 0 34px;color:#e5eaf0;font-size:17px;line-height:1.62}
.ctas{display:flex;flex-wrap:wrap;gap:11px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:1px solid #8793a2;border-radius:3px;background:#000;color:#fff;font:12px var(--mono)}
.btn.primary{background:#fff;border-color:#fff;color:#000;font-weight:800}
.hero-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:62px;border-top:1px solid rgba(255,255,255,.34)}
.metric{min-width:0;padding:19px 16px 0 0}.metric b{display:block;color:#fff;font-size:24px;letter-spacing:-.04em;overflow-wrap:anywhere}.metric span{color:#ccd4dd;font:10px var(--mono)}

section.content{padding:90px 0;background:#000;border-bottom:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:190px minmax(0,1fr);gap:34px;margin-bottom:46px}
.section-head h3{max-width:800px;margin:0;color:#fff;font-size:clamp(34px,4vw,54px);line-height:1.02;letter-spacing:-.047em}
.section-head p{max-width:700px;margin:16px 0 0;color:#cbd3dc;font-size:16px}
.web-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid #3d4651}
.web{min-width:0;min-height:250px;padding:31px 32px 36px 0;border-right:1px solid #343d47}.web+.web{padding-left:32px}.web:last-child{border-right:0}
.num{color:#bdc6d0;font:10px var(--mono)}.web h4{margin:46px 0 11px;font-size:25px;letter-spacing:-.035em}.web p{margin:0 0 23px;color:#cdd5de}.web a{color:#fff;font:11px var(--mono)}
.human h4{color:var(--violet)}.ai h4{color:var(--cyan)}.a2a h4{color:var(--green)}
.log{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:24px;align-items:start;padding:20px 0;border-top:1px solid #343d47}.log:last-child{border-bottom:1px solid #343d47}.log time,.log .tag{color:#c0c9d3;font:10px var(--mono)}.log h4{margin:0 0 6px;color:#fff;font-size:19px}.log p{margin:0;color:#cbd3dc}
.endurance-band{background:#05070a!important}.formula{max-width:100%;padding-left:20px;border-left:2px solid #8d99a8;color:#e3e8ee;font:13px/2 var(--mono);overflow-wrap:anywhere}
footer{padding:42px 0;background:#000;color:#b2bdc8;font:10px var(--mono)}

@media (max-width:1024px){
  .wrap{width:min(100% - 44px,1240px)}
  .session{display:none}
  .hero{min-height:680px}
  .hero-bg{object-position:66% center}
  .hero-content{max-width:660px;padding-top:76px}
  .section-head{grid-template-columns:150px minmax(0,1fr);gap:26px}
  .web{padding-right:24px}.web+.web{padding-left:24px}
}
@media (max-width:768px){
  .wrap{width:calc(100% - 32px)}
  .topline .right{display:none}
  header{height:68px}.brand{font-size:19px}.hamb{width:42px;height:42px;flex-basis:42px}.drawer{top:55px}
  .hero{min-height:760px}
  .hero-bg{opacity:1;object-position:69% center;filter:saturate(1.02) contrast(1.06) brightness(.72)}
  .hero:after{content:none!important;display:none!important}
  .hero-content{max-width:none;padding:58px 0 46px;text-shadow:none;line-height:.9;margin-bottom:22px}
  h2{font-size:clamp(24px,6.8vw,34px);line-height:1.13}
  .hero-copy{font-size:16px;max-width:560px}
  .hero-meta{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:46px}
  .metric{padding:15px 12px 10px 0}
  section.content{padding:68px 0}
  .section-head{grid-template-columns:1fr;gap:12px;margin-bottom:32px}
  .web-grid{grid-template-columns:1fr}
  .web,.web+.web{min-height:0;padding:28px 0;border-right:0;border-bottom:1px solid #343d47}.web:last-child{border-bottom:0}.web h4{margin-top:24px}
  .log{grid-template-columns:1fr;gap:6px}.log .tag{justify-self:start}
}
@media (max-width:480px){
  .wrap{width:calc(100% - 24px)}
  .topline .wrap{min-height:32px}.live{font-size:10px}
  header{height:64px}.brand{font-size:17px}.brand small{font-size:7px;letter-spacing:.12em}.hamb{width:40px;height:40px;flex-basis:40px}
  .drawer{right:0;top:51px;width:calc(100vw - 24px)}
  .hero{min-height:720px}
  .hero-bg{object-position:72% center}
  .hero-content{padding-top:48px}
  .path{font-size:9px;white-space:normal}.kicker{font-size:10px}
  h1{font-size:clamp(48px,17vw,68px);letter-spacing:-.058em}
  h2{font-size:clamp(23px,7.2vw,30px)}
  .hero-copy{font-size:15px;line-height:1.58}
  .ctas{display:grid;grid-template-columns:1fr}.btn{width:100%;min-height:50px;padding-inline:14px}
  .hero-meta{gap:0}.metric b{font-size:21px}.metric span{font-size:9px}
  section.content{padding:56px 0}.section-head h3{font-size:clamp(31px,10vw,43px)}
  .formula{font-size:11px;line-height:1.85}
}
@media (max-width:360px){
  .brand small{display:none}
  h1{font-size:46px}
  h2{font-size:22px}
  .hero-meta{grid-template-columns:1fr 1fr}
}

header{background:#000!important}.hero-bg{opacity:1!important}.hero:after{content:none!important;display:none!important}

.hero-bg{
  opacity:1!important;
  filter:none!important;
  visibility:visible!important;
}
.hero:after{
  content:none!important;
  display:none!important;
  background:none!important;
}

.hero-bg{
  opacity:1!important;
  filter:none!important;
  object-fit:contain!important;
  object-position:right center!important;
  background:#000!important;
}
@media(max-width:768px){
  .hero-bg{
    object-fit:cover!important;
    object-position:center center!important;
  }
}

/* === ECBTAX VISUAL COMPOSITION / B2B CONTENT === */
.hero{
  min-height:auto!important;
  background:#000!important;
  overflow:hidden!important;
}
.hero:after,.hero-bg{display:none!important}
.hero-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr)!important;
  gap:64px!important;
  align-items:center!important;
  min-height:690px!important;
  padding-block:34px!important;
}
.hero-content{
  max-width:720px!important;
  padding:54px 0!important;
  text-shadow:none!important;
}
.hero-visual{
  min-width:0;
  border:1px solid #343a43;
  background:#030405;
  padding:24px;
}
.visual-meta{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
  color:#c3ccd6;
  font:10px/1.3 var(--mono);
  letter-spacing:.12em;
}
.visual-meta span:last-child{color:#7af2ba}
.visual-frame{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#000;
  border:1px solid #343a43;
  border-radius:50% 50% 0 0 / 18% 18% 0 0;
}
.visual-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
@media(max-width:1024px){
  .hero-layout{
    grid-template-columns:minmax(0,1fr) minmax(350px,.82fr)!important;
    gap:34px!important;
    min-height:620px!important;
  }
  .hero-content{padding:42px 0!important}
  .hero-visual{padding:18px}
}
@media(max-width:768px){
  .hero-layout{
    grid-template-columns:1fr!important;
    gap:24px!important;
    min-height:auto!important;
    padding-block:34px 54px!important;
  }
  .hero-content{padding:20px 0 0!important;max-width:none!important}
  .hero-visual{width:100%;padding:14px!important}
  .visual-frame{border-radius:50% 50% 0 0 / 14% 14% 0 0}
}
@media(max-width:480px){
  .hero-layout{padding-block:24px 42px!important}
  .hero-content{padding-top:12px!important}
  .hero-visual{padding:10px!important}
  .visual-meta{font-size:8px;letter-spacing:.08em}
}

/* === PROFESSIONAL EDITORIAL TYPOGRAPHY === */
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
  font-size:16px!important;
  line-height:1.55!important;
  letter-spacing:0!important;
}
.hero-content{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
}
.hero-content h1{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
  font-weight:800!important;
  font-size:clamp(58px,6.5vw,96px)!important;
  line-height:.90!important;
  letter-spacing:-.065em!important;
  max-width:650px!important;
}
.hero-content h2{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
  font-weight:500!important;
  font-size:clamp(30px,3vw,46px)!important;
  line-height:1.08!important;
  letter-spacing:-.038em!important;
  max-width:690px!important;
  color:#fff!important;
  text-wrap:balance;
}
.hero-copy{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
  font-weight:400!important;
  font-size:18px!important;
  line-height:1.58!important;
  letter-spacing:-.012em!important;
  max-width:610px!important;
  color:#d9dfe7!important;
}
.btn{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
  font-weight:700!important;
  font-size:12px!important;
  letter-spacing:.055em!important;
}
.path,.kicker,.section-kicker,.visual-meta,.metric span,.num,.log time,.log .tag,.formula,footer{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace!important;
}
@media(max-width:768px){
  .hero-content h1{
    font-size:clamp(52px,14vw,76px)!important;
    line-height:.90!important;
    letter-spacing:-.055em!important;
  }
  .hero-content h2{
    font-size:clamp(28px,7.4vw,38px)!important;
    line-height:1.10!important;
    letter-spacing:-.035em!important;
    text-wrap:pretty;
  }
  .hero-copy{
    font-size:17px!important;
    line-height:1.58!important;
    max-width:34rem!important;
  }
}
@media(max-width:480px){
  .hero-content h1{font-size:52px!important}
  .hero-content h2{font-size:29px!important;line-height:1.12!important}
  .hero-copy{font-size:16px!important;line-height:1.55!important}
}

.topline,.path{display:none!important}

/* === LAST ACCEPTED COMPACT HERO === */
.hero{
  min-height:auto!important;
}
.hero-layout{
  grid-template-columns:minmax(0,1.02fr) minmax(430px,.98fr)!important;
  gap:48px!important;
  min-height:calc(100vh - 76px)!important;
  max-height:760px;
  padding-block:22px!important;
  align-items:center!important;
}
.hero-content{
  padding:16px 0!important;
  max-width:680px!important;
}
.kicker{margin-bottom:10px!important}
.hero-content h1{
  margin-bottom:18px!important;
  font-size:clamp(58px,6.2vw,92px)!important;
  line-height:.88!important;
}
.hero-content h2{
  margin-bottom:16px!important;
  font-size:clamp(29px,2.7vw,42px)!important;
  line-height:1.08!important;
}
.hero-copy{
  margin-bottom:22px!important;
  font-size:17px!important;
  line-height:1.5!important;
}
.ctas{gap:12px!important}
.btn{min-height:50px!important;padding-inline:20px!important}
.hero-meta{display:none!important}
.hero-visual{
  padding:20px!important;
}
.visual-meta{margin-bottom:14px!important}
.visual-frame{
  aspect-ratio:1/1!important;
}
.visual-frame img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  opacity:1!important;
  filter:none!important;
}
@media(max-width:1024px){
  .hero-layout{
    grid-template-columns:minmax(0,1fr) minmax(360px,.9fr)!important;
    gap:28px!important;
    min-height:auto!important;
    max-height:none;
    padding-block:28px!important;
  }
}
@media(max-width:768px){
  .hero-layout{
    grid-template-columns:1fr!important;
    gap:22px!important;
    min-height:auto!important;
    padding-block:24px 36px!important;
  }
  .hero-content{padding:0!important;max-width:none!important}
  .hero-content h1{font-size:clamp(52px,14vw,76px)!important}
  .hero-content h2{font-size:clamp(27px,7vw,36px)!important}
  .hero-visual{padding:14px!important}
}
@media(max-width:480px){
  .hero-layout{padding-block:18px 28px!important}
  .hero-content h1{font-size:50px!important}
  .hero-content h2{font-size:28px!important}
  .hero-copy{font-size:16px!important}
  .ctas{display:grid!important;grid-template-columns:1fr!important}
  .btn{width:100%!important}
}

/* APPROVED VERSION
   Desktop: separate ENDURANCE image on right.
   Mobile: NO separate image; same artwork becomes hero background.
*/
@media (max-width:768px){
  header{position:relative!important;top:auto!important}
  .hero{
    position:relative!important;
    min-height:auto!important;
    height:auto!important;
    background:
      linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.88) 76%,#000 100%),
      url("hero-1080x1080.webp") center top / cover no-repeat!important;
  }
  .hero-layout{
    display:block!important;
    min-height:auto!important;
    height:auto!important;
    max-height:none!important;
    padding:54px 0 48px!important;
  }
  .hero-content{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    position:relative!important;
    z-index:2!important;
  }
  .hero-visual{display:none!important}
  .hero-content h1{font-size:clamp(52px,14vw,76px)!important}
  .hero-content h2{font-size:clamp(27px,7vw,36px)!important}
  .hero-copy{max-width:34rem!important}
  .ctas{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .btn{width:100%!important}
}
@media (max-width:480px){
  .hero-layout{padding:42px 0 38px!important}
  .hero{
    background:
      linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.62) 36%,rgba(0,0,0,.92) 78%,#000 100%),
      url("hero-1080x1080.webp") 58% top / cover no-repeat!important;
  }
}
