/* =========================================================
   Marketeam / Freedom / Precision patterns → Revel Ads
   Accent: #FF6A00 · Ink: #111 · Paper: #FAFAFA
   ========================================================= */

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ---------- Stage hero ---------- */
.hero-stage{
  --accent:#ff6a00;
  --accent-soft:rgba(255,106,0,.55);
  --stage-dark:#0a0908;
  --ease-out:cubic-bezier(.22,1,.36,1);
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  color:#fff;
  background:var(--stage-dark);
  overflow:hidden;
}
.hero-stage__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(105deg,rgba(10,9,8,.55) 0%,rgba(10,9,8,.2) 42%,rgba(10,9,8,.45) 100%),
    url("assets/brand/hero-bg.jpg") center center / cover no-repeat;
  pointer-events:none;
}
.hero-stage__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 72% 42%,rgba(255,106,0,.18),transparent 42%);
  pointer-events:none;
}

/* Header sits on stage for first paint; keep fixed global header look */
body.has-hero-stage .header:not(.scrolled){
  color:#fff;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
body.has-hero-stage .header:not(.scrolled) .nav a{color:rgba(255,255,255,.82)}
body.has-hero-stage .header:not(.scrolled) .nav a:hover,
body.has-hero-stage .header:not(.scrolled) .nav a.active{color:#fff}
body.has-hero-stage .header:not(.scrolled) .btn--header{
  color:#fff;
  background:#111;
}
body.has-hero-stage .header:not(.scrolled) .icon-link{border-color:rgba(255,255,255,.28)}
body.has-hero-stage .header:not(.scrolled) .logo__dark{opacity:0}
body.has-hero-stage .header:not(.scrolled) .logo__light{opacity:1}

.hero-stage__main{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  width:min(calc(100% - 3rem),1280px);
  margin:0 auto;
  padding:calc(var(--header-h,72px) + 1.25rem) 0 1rem;
  display:flex;
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  min-height:0;
}
.hero-stage__left{
  flex:0 1 560px;
  max-width:560px;
  padding-top:.5rem;
  opacity:0;
  transform:translate3d(0,40px,0);
  animation:stageFadeUp 1s var(--ease-out) .05s forwards;
}
.hero-stage__title{
  min-height:clamp(4.8rem,12vw,8.4rem);
  font-family:var(--display,inherit);
  font-size:clamp(2rem,4.4vw,3.75rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.04em;
  margin:0;
}
.hero-stage__title .typed-dark{color:rgba(255,255,255,.96)}
.hero-stage__title .typed-light{color:var(--accent)}
.hero-stage__cursor{
  display:inline-block;
  width:3px;
  height:.85em;
  margin-left:4px;
  vertical-align:-.05em;
  background:var(--accent);
  animation:cursorBlink .9s step-end infinite;
}
.hero-stage__cursor.is-done{opacity:0;animation:none}
.hero-stage__sub{
  margin:1.1rem 0 0;
  max-width:34rem;
  color:rgba(255,255,255,.68);
  font-size:clamp(.95rem,1.4vw,1.08rem);
  line-height:1.55;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.hero-stage__sub.is-on{opacity:1;transform:none}

/* Rotating border buttons */
.btn-border-wrap{
  --border-angle:0deg;
  position:relative;
  display:inline-flex;
  border-radius:999px;
  padding:2px;
  isolation:isolate;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
}
.btn-border-wrap.is-on{opacity:1;transform:none}
.btn-border-wrap::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  border-radius:inherit;
  background:conic-gradient(from var(--border-angle),#ff6a00,#1a1008,#ff8a3d,#111111,#ff6a00);
  animation:borderSpin 3s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:2px;
}
.btn-border-wrap .btn-fill{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  min-height:52px;
  padding:14px 28px;
  border:0;
  border-radius:999px;
  color:#fff;
  background:#111;
  font-size:1rem;
  font-weight:600;
  overflow:hidden;
  cursor:pointer;
  text-decoration:none;
}
.btn-border-wrap .btn-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--accent);
  transform:translateX(100%);
  transition:transform .4s var(--ease-out);
  z-index:0;
}
.btn-border-wrap .btn-fill:hover::after{transform:translateX(0)}
.btn-border-wrap .btn-fill > *{position:relative;z-index:1}
.btn-border-wrap--header .btn-fill{
  min-height:44px;
  padding:12px 22px;
  font-size:.9rem;
}
.hero-stage__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  margin-top:1.6rem;
}
.hero-stage__ghost{
  color:rgba(255,255,255,.72);
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:2px;
  opacity:0;
  transition:opacity .5s var(--ease-out),color .2s;
}
.hero-stage__ghost.is-on{opacity:1}
.hero-stage__ghost:hover{color:#fff}

.hero-stage__chip{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-top:1.6rem;
  margin-left:clamp(0px,8vw,180px);
  opacity:0;
  transform:translateY(12px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
}
.hero-stage__chip.is-on{opacity:1;transform:none}
.hero-stage__chip svg{flex:0 0 auto}
.hero-stage__chip span{
  display:inline-flex;
  padding:.45rem .9rem;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:.9rem;
  font-weight:600;
}

/* Orbits */
.hero-stage__right{
  flex:1 1 auto;
  display:grid;
  place-items:center;
  min-width:0;
  opacity:0;
  transform:scale(.88);
  animation:stageScaleIn 1.2s var(--ease-out) .25s forwards;
}
.orbit-system{
  --size:min(92vw,620px);
  position:relative;
  width:var(--size);
  height:var(--size);
  max-width:100%;
}
.orbit{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.orbit::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  padding:1px;
  background:linear-gradient(180deg,rgba(255,160,80,0) 0%,rgba(255,140,50,.95) 43%,rgba(255,160,80,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.orbit--1{width:44%;height:44%;animation:spinL 30s linear infinite}
.orbit--2{width:62%;height:62%;animation:spinR 40s linear infinite}
.orbit--3{width:80%;height:80%;animation:spinR 50s linear infinite}
.orbit--4{width:98%;height:98%;animation:spinL 60s linear infinite}
.orbit-core{
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  width:28%;
  height:28%;
  display:grid;
  place-content:center;
  text-align:center;
  border-radius:50%;
  background:rgba(12,11,10,.72);
  border:1px solid rgba(255,106,0,.45);
  box-shadow:0 0 40px rgba(255,106,0,.18);
  transform:translate(-50%,-50%);
  backdrop-filter:blur(10px);
}
.orbit-core strong{
  display:block;
  font-size:clamp(1.1rem,2.4vw,1.7rem);
  font-weight:700;
  letter-spacing:-.03em;
  color:#fff;
}
.orbit-core span{
  display:block;
  margin-top:.2rem;
  font-size:clamp(.58rem,.9vw,.72rem);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
}
.orbit-node{
  --a:0deg;
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:var(--node,58px);
  height:var(--node,58px);
  margin:0;
  border:0;
  padding:0;
  border-radius:var(--radius,50%);
  overflow:hidden;
  background:#1a1612;
  box-shadow:0 0 0 2px rgba(255,255,255,.12),0 0 22px var(--glow,rgba(255,106,0,.45));
  /* radius = half of parent orbit */
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(-50%) rotate(calc(var(--a) * -1));
  animation:nodeIn .85s var(--ease-out) both;
  animation-delay:var(--delay,.6s);
}
.orbit-node img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.orbit-node--label{
  display:grid;
  place-items:center;
  width:auto;
  min-width:var(--node,72px);
  height:auto;
  min-height:36px;
  padding:.45rem .7rem;
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:rgba(17,17,17,.88);
  border:1px solid rgba(255,106,0,.4);
  overflow:visible;
}

/* Ticker */
.hero-ticker{
  position:relative;
  z-index:2;
  margin-top:auto;
  padding:1rem 0 1.35rem;
  opacity:0;
  transform:translateY(24px);
  animation:stageFadeUp .9s var(--ease-out) .55s forwards;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.hero-ticker__track{
  display:flex;
  width:max-content;
  gap:3.5rem;
  animation:tickerMove 22s linear infinite;
}
.hero-ticker__group{
  display:flex;
  align-items:center;
  gap:3.5rem;
  color:rgba(255,255,255,.42);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero-ticker__group i{
  color:var(--accent);
  font-style:normal;
  font-size:.55rem;
}

@keyframes borderSpin{to{--border-angle:360deg}}
@keyframes cursorBlink{50%{opacity:0}}
@keyframes stageFadeUp{to{opacity:1;transform:none}}
@keyframes stageScaleIn{to{opacity:1;transform:scale(1)}}
@keyframes spinL{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes spinR{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes nodeIn{
  from{opacity:0;filter:blur(8px);transform:translate(-50%,-50%) rotate(var(--a)) translateY(-50%) rotate(calc(var(--a) * -1)) scale(.3)}
  to{opacity:1;filter:none;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-50%) rotate(calc(var(--a) * -1)) scale(1)}
}
@keyframes tickerMove{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- Freedom (clarity) section ---------- */
.clarity{
  background:#fff;
  padding:clamp(3rem,6vw,5rem) clamp(1rem,3vw,2.5rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2.25rem;
}
.clarity__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.5rem;
  max-width:46rem;
}
.clarity__badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem 1rem;
  border-radius:999px;
  background:#f6f4f1;
  color:#1a120c;
  font-size:.95rem;
  font-weight:600;
}
.clarity__badge svg{flex:0 0 auto}
.clarity__head h2{
  margin:0;
  font-size:clamp(1.85rem,4vw,3.2rem);
  font-weight:650;
  line-height:1.12;
  letter-spacing:-.04em;
  color:#15110e;
}
.clarity__head h2 .grad,
.clarity__head h2 .clarity__title-accent{
  display:block;
  background-image:none;
  background:none;
  -webkit-background-clip:unset;
  background-clip:unset;
  -webkit-text-fill-color:#111111;
  color:#111111;
  font-family:inherit;
  font-style:normal;
  font-weight:700;
  letter-spacing:-.045em;
  text-transform:none;
  padding-bottom:.04em;
}
.clarity__head h2 .clarity__title-clarity{
  color:#1a9a4a;
  -webkit-text-fill-color:#1a9a4a;
  font-family:"Libre Bodoni",Georgia,serif;
  font-style:normal;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 2px 4px rgba(0,0,0,.28);
}
.clarity__head h2 .clarity__title-wrong{
  color:#d41919;
  font-family:"Libre Bodoni",Georgia,serif;
  font-style:italic;
  font-weight:500;
}
.clarity__grid{
  width:100%;
  max-width:1180px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:1.5rem 2rem;
  align-items:start;
}
.clarity__col{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  font-size:clamp(.82rem,1.1vw,1rem);
}
.clarity-card{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  padding:clamp(.75rem,1vw,1rem) clamp(.9rem,1.2vw,1.2rem);
  border-radius:16px;
  background:#fff;
  box-shadow:0 3px 10px rgba(40,28,18,.06),0 1px 24px rgba(40,28,18,.08);
}
.clarity-card--bad{color:#7a7268}
.clarity-card--good{color:#1a120c}
.clarity-card__icon{
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:.7rem;
  font-weight:800;
  line-height:1;
}
.clarity-card--bad .clarity-card__icon{background:#f3e8e4;color:#c2410c}
.clarity-card--good .clarity-card__icon{background:#fff1e6;color:#ff6a00}
/* video circle replaced by vs badge in ui-polish */

/* ---------- Precision pillars ---------- */
.precision{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(2rem,4vw,3.5rem);
  padding:clamp(3rem,8vw,6.5rem) clamp(1rem,4vw,3.5rem) clamp(3rem,5vw,5rem);
  background:
    linear-gradient(180deg,rgba(250,250,250,.92),rgba(250,250,250,.96)),
    url("assets/brand/precision-bg.webp") center/cover no-repeat;
  color:#15110e;
}
.precision__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
  max-width:min(900px,92vw);
}
.precision__badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem 1rem;
  border-radius:999px;
  background:rgba(249,249,249,.95);
  font-size:clamp(.85rem,1.1vw,1.05rem);
  font-weight:600;
  color:#1a120c;
}
.precision__head h2{
  margin:0;
  font-size:clamp(1.75rem,4vw,3.2rem);
  font-weight:650;
  line-height:1.15;
  letter-spacing:-.04em;
}
.precision__head h2 .line{display:block}
.precision__head h2 .grad{
  display:block;
  background-image:linear-gradient(90deg,#ff8a3d,#ff6a00 45%,#ffb070);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  padding-bottom:.1em;
}
.precision__head p{
  margin:0;
  max-width:40rem;
  color:#8a7f74;
  font-size:clamp(.95rem,1.2vw,1.15rem);
}
.precision__board{
  position:relative;
  width:min(100%,82.292vw);
  height:min(34vw,420px);
  margin:0 auto;
}
.precision-pillar{
  position:absolute;
  bottom:var(--b);
  left:var(--l);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.precision-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.7rem 1.15rem;
  border-radius:18px;
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.65));
  box-shadow:0 8px 24px rgba(40,28,18,.08);
  font-size:clamp(.85rem,1.1vw,1.05rem);
  font-weight:600;
  white-space:nowrap;
}
.precision-chip i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff6a00;
  box-shadow:0 0 0 4px rgba(255,106,0,.15);
}
.precision-pillar__body{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:.35rem;
}
.precision-pillar__items{
  position:absolute;
  top:.45rem;
  left:1.1rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  text-align:left;
  font-size:clamp(.72rem,.95vw,.9rem);
  color:#4a433c;
}
.precision-pillar__items span{padding:.35rem .55rem}
.precision-line{
  width:1px;
  height:clamp(90px,14vw,170px);
  background:linear-gradient(#ff6a00,rgba(255,106,0,.15));
}
.precision__mobile{display:none;width:100%;max-width:520px;margin:0 auto;text-align:left}

@media (max-width:1280px){
  .orbit-system{--size:min(88vw,540px)}
}
@media (max-width:1024px){
  .hero-stage__main{flex-direction:column;align-items:stretch;padding-bottom:.5rem}
  .hero-stage__left{max-width:none;flex:none}
  .hero-stage__title{font-size:clamp(2rem,6vw,3rem);min-height:auto}
  .hero-stage__chip{margin-left:0}
  .orbit-system{--size:min(86vw,480px);margin:0 auto}
  .clarity__grid{grid-template-columns:1fr;max-width:560px}
  .clarity__video{order:-1;width:min(72vw,300px);height:min(72vw,300px);justify-self:center}
  .precision__board{display:none}
  .precision__mobile{display:flex;flex-direction:column;gap:1rem}
  .precision-m-pillar{display:flex;flex-direction:column;gap:.35rem}
  .precision-m-pillar.is-right{align-items:flex-end}
  .precision-m-row{display:flex;align-items:stretch;width:100%}
  .precision-m-pillar.is-right .precision-m-row{flex-direction:row-reverse}
  .precision-m-line{
    width:1px;
    min-height:110px;
    flex-shrink:0;
    margin-inline:1.1rem;
    background:linear-gradient(#ff6a00,transparent);
  }
  .precision-m-items{
    display:flex;
    flex-direction:column;
    gap:.15rem;
    padding:.35rem 0;
    font-size:.9rem;
    color:#5c544c;
  }
  .precision-m-pillar.is-right .precision-m-items{align-items:flex-end;text-align:right}
}
@media (max-width:768px){
  .hero-stage__main{width:min(calc(100% - 1.5rem),1280px);padding-top:calc(var(--header-h,72px) + .75rem)}
  .hero-stage__title{font-size:clamp(1.75rem,8vw,2.35rem)}
  .orbit-system{--size:min(92vw,360px)}
  .orbit-node{--node:48px}
  .hero-ticker__group{font-size:.68rem;gap:2rem}
  .hero-ticker__track{gap:2rem}
}
@media (max-width:480px){
  .orbit-system{--size:min(96vw,300px)}
  .orbit-node--label{font-size:.52rem;padding:.35rem .5rem}
  .btn-border-wrap .btn-fill{width:100%;justify-content:center}
  .hero-stage__actions{flex-direction:column;align-items:stretch}
  .hero-stage__ghost{text-align:center;border:0}
}

@media (prefers-reduced-motion:reduce){
  .hero-stage__left,.hero-stage__right,.hero-ticker,
  .btn-border-wrap,.hero-stage__sub,.hero-stage__ghost,.hero-stage__chip{
    opacity:1!important;transform:none!important;animation:none!important;transition:none!important;
  }
  .orbit,.orbit-node,.hero-ticker__track,.clarity__video-ring,.clarity__video-inner img,
  .btn-border-wrap::before,.hero-stage__cursor{animation:none!important}
  .hero-stage__cursor{opacity:0}
}