/* HAEBODA AI STUDIO / Editorial edition — deliberately no fake dashboard.
   CSS presentation only: free studio, member links and production APIs untouched. */
:root{--mint:#b0f3d8;--mint-deep:#7ee4cb;--bg:#090f13;--panel:#141f26;--line:#2b4446}
body{
  background:
    radial-gradient(ellipse 70% 550px at 87% 12%,#1a50552f,transparent 69%),
    radial-gradient(ellipse 65% 660px at -12% 64%,#193b3933,transparent 67%),
    #090f13;
}
.ambient{opacity:.35;filter:blur(130px)}
.site-wrap{max-width:1540px}
.site-header{height:85px}
.site-header .wordmark{gap:13px}
.site-header .brand-mark{font-size:32px}
.site-header .header-link{background:rgba(176,243,216,.05);border-color:#43615a}
.hero.hero-editorial{
  min-height:clamp(510px,46vw,635px);gap:clamp(32px,4vw,74px);padding:72px 0 68px;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
}
.hero-editorial .hero-content{padding:20px 0 0}
.hero-editorial .eyebrow{letter-spacing:.22em;font-size:10px;margin-bottom:34px}
.hero-editorial .hero h1{margin-bottom:28px}
.hero-editorial h1{
  font-size:clamp(56px,6vw,90px);line-height:1.19;letter-spacing:-.078em;
  font-weight:780;margin:0 0 28px;text-wrap:balance;
}
.hero-editorial h1 em{
  font-style:normal;color:var(--mint);background:linear-gradient(120deg,#c7ffe6 15%,#7ad9c6 89%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-editorial .hero-lead{
  color:#c2d0d4;font-size:clamp(14px,1.4vw,17px);line-height:1.94;
  max-width:580px;margin-bottom:28px;
}
.hero-editorial .hero-cta{gap:28px}
.hero-editorial .button-primary{box-shadow:0 17px 42px #4dcd9a16}
.studio-link-secondary{color:#c6d8d4;font-weight:750;font-size:13px;border-bottom:1px solid #607c74;padding-bottom:6px;transition:color .2s,border-color .2s}
.studio-link-secondary:hover{color:#b9f6d9;border-color:#b9f6d9}
.hero-footnote{margin:20px 0 0;font-size:11px;color:#77918e;letter-spacing:.03em}
.editorial-canvas{
  position:relative;height:auto;min-height:510px;display:flex;flex-direction:column;justify-content:space-between;
  isolation:isolate;overflow:hidden;padding:27px 30px 22px;
  background:
    repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#bdfce508 calc(25% - 1px),#bdfce508 25%),
    radial-gradient(ellipse at 60% 53%,#22545642,transparent 60%),
    linear-gradient(125deg,#0f1b1e,#101a21 54%,#0b1318);
  border:1px solid #32484a;border-radius:5px;
}
.editorial-canvas:before{
  content:"";position:absolute;pointer-events:none;inset:0;width:auto;height:auto;border-radius:0;filter:none;transform:none;
  background:linear-gradient(103deg,transparent 34%,#9feecb0b 51%,transparent 68%);
  background-size:230% 100%;animation:canvas-sweep 11s ease-in-out infinite alternate;
}
.editorial-canvas:after{
  content:"";width:260px;height:260px;position:absolute;z-index:-1;right:-78px;bottom:-88px;
  border-radius:50%;border:1px solid #a5eac929;box-shadow:0 0 0 58px #80eacc05,0 0 0 118px #80eacc04;
}
.editorial-canvas-top,.editorial-canvas-bottom{z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:10px;color:#73968e;letter-spacing:.16em;font-weight:800}
.editorial-canvas-top{border-bottom:1px solid #ffffff1c;padding-bottom:18px}
.editorial-canvas-top span:last-child{color:#addbc4}
.editorial-canvas-bottom{border-top:1px solid #ffffff1c;padding-top:19px;font-size:9px;white-space:nowrap}
.canvas-dot{font-size:25px;color:#c0ffe2;line-height:1;font-weight:300}
.editorial-canvas-center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:15px 0 18px}
.canvas-entry{
 display:flex;align-items:baseline;justify-content:space-between;gap:12px;position:relative;
 border-bottom:1px solid #ffffff13;padding:8px 0 12px;min-height:105px;
}
.canvas-entry:last-of-type{border-bottom:0}
.canvas-index{font-size:9px;letter-spacing:.15em;color:#82a99f;font-weight:900;min-width:95px}
.canvas-entry strong{
  font-size:clamp(54px,6vw,90px);line-height:1.04;letter-spacing:-.075em;
  font-weight:820;color:#dceae7;flex:1;text-align:center;
}
.canvas-entry:nth-child(1) strong{color:#78938d}
.canvas-entry:nth-child(2) strong{color:#baf6d6;text-shadow:0 0 50px #6bdcba2e}
.canvas-entry:nth-child(3) strong{color:transparent;-webkit-text-stroke:1px #b4dcce}
.canvas-entry i{font-size:10px;color:#a1b5ad;font-style:normal;min-width:67px;text-align:right;white-space:nowrap}
.canvas-rail{position:absolute;top:1%;bottom:1%;left:13px;width:1px;background:linear-gradient(#65867800,#659d90 28%,#659d90 70%,#65867800);pointer-events:none;opacity:.4}
.canvas-rail span{width:5px;height:5px;position:absolute;left:-2px;background:#bbf3da;border-radius:50%}
.canvas-rail span:nth-child(1){top:17%}.canvas-rail span:nth-child(2){top:51%}.canvas-rail span:nth-child(3){top:85%}
.hero-bottom{padding:21px 0;border-top:1px solid #ffffff27;border-bottom:1px solid #ffffff12;letter-spacing:.16em}
.hero-bottom span:last-child{color:#8fb7a8}
.studio-section{
  border-top:0;padding:108px 0 108px;
  background:radial-gradient(ellipse 85% 420px at 50% 8%,#284d4531,transparent 68%);
}
.studio-heading{margin-bottom:36px}
.studio-heading .eyebrow{margin-bottom:13px}
.studio-heading h2{font-size:clamp(37px,4.8vw,61px);line-height:1.24}
.preview-status{background:#0f2526;border:1px solid #42665f}
.studio-grid{gap:16px}
.studio-section .studio-panel{
  border:1px solid #38504e;background:linear-gradient(155deg,#17252c,#0e181f 82%);
  border-radius:11px;padding:clamp(20px,3vw,37px);
  box-shadow:0 30px 66px #0205073d;
}
.studio-section .studio-panel:first-child{border-top:2px solid #8bdec0}
.studio-section .studio-panel:last-child{border-top:2px solid #6aaab7}
.studio-section .panel-step{color:#b0edcf}
.studio-section .panel-top{margin-bottom:21px}
.studio-section .concept-option{border-radius:7px}
.studio-section .button-primary{border-radius:8px}
.features-editorial{
  border-top:1px solid #ffffff20;padding:100px 0 113px;
}
.features-editorial .section-heading{align-items:start;display:block;margin-bottom:45px}
.features-editorial .section-heading .eyebrow{margin-bottom:17px}
.features-editorial .section-heading h2{font-size:clamp(38px,4.3vw,57px);line-height:1.25}
.features-editorial .features-grid{gap:0;border-top:1px solid #50615c;border-bottom:1px solid #344640}
.features-editorial .feature{
  background:transparent;border:0;border-radius:0;padding:33px 30px 40px 0;min-height:230px;
  transition:none;box-shadow:none;overflow:visible
}
.features-editorial .feature:before{display:none}
.features-editorial .feature+.feature{border-left:1px solid #32433e;padding-left:30px}
.features-editorial .feature:hover{transform:none;box-shadow:none}
.features-editorial .feature-index{position:static;font-size:10px;color:#8abda7;letter-spacing:.2em}
.features-editorial .feature-icon{display:none}
.features-editorial .feature h3{font-size:clamp(21px,2.7vw,29px);margin:32px 0 14px}
.features-editorial .feature p{font-size:14px;line-height:1.85;max-width:310px;color:#a9bec0}
.roadmap{
  border-top:1px solid #ffffff18;gap:54px;padding:75px 0 95px;
  background:linear-gradient(140deg,#101e1f6e,#0a141b)
}
.roadmap .eyebrow{margin-bottom:17px}
.roadmap h2{font-size:clamp(35px,3.7vw,50px)}
.roadmap-flow{gap:0}
.roadmap-flow>div{background:transparent;border:0;border-bottom:1px solid #3d5651;border-radius:0;padding:17px 0;box-shadow:none}
.roadmap-flow>span{display:none}
.roadmap-flow>div:first-child{border-top:1px solid #3d5651}
.roadmap-flow>div strong{font-size:16px}
.roadmap-flow>div small{color:#91aaa4}
@keyframes canvas-sweep{from{background-position:100% center}to{background-position:0 center}}
@media(max-width:1150px){
  .hero.hero-editorial{gap:25px;min-height:530px;padding:65px 0}
  .hero-editorial h1{font-size:clamp(53px,5.7vw,72px)}
  .editorial-canvas{min-height:450px;padding:20px}
  .canvas-entry{min-height:91px}
  .canvas-entry strong{font-size:clamp(47px,5.7vw,70px)}
  .canvas-entry i{font-size:9px}
}
@media(max-width:800px){
  .hero.hero-editorial{display:grid;grid-template-columns:1fr;padding:58px 0 48px;gap:28px}
  .hero-editorial .hero-content{padding:0}
  .hero-editorial h1{font-size:clamp(58px,8vw,77px)}
  .editorial-canvas{min-height:445px;max-width:640px;width:100%;margin:5px auto 0}
  .canvas-entry strong{font-size:clamp(55px,8vw,78px)}
  .studio-section{padding:80px 0}
  .features-editorial .feature{padding-right:20px}
  .features-editorial .feature+.feature{padding-left:20px}
}
@media(max-width:540px){
  .hero.hero-editorial{padding:46px 0 35px;gap:24px}
  .hero-editorial .eyebrow{margin-bottom:24px}
  .hero-editorial h1{font-size:clamp(44px,12vw,62px);line-height:1.2}
  .hero-editorial .hero-lead{font-size:13px;margin-bottom:24px}
  .hero-editorial .hero-cta{gap:18px}
  .studio-link-secondary{font-size:12px}
  .editorial-canvas{height:345px;min-height:345px;padding:16px}
  .editorial-canvas-top,.editorial-canvas-bottom{font-size:8px}
  .canvas-entry{min-height:75px;align-items:baseline}
  .canvas-entry strong{font-size:clamp(42px,11vw,64px)}
  .canvas-index{font-size:7px;min-width:65px}
  .canvas-entry i{font-size:8px;min-width:46px}
  .hero-bottom{font-size:8px}
  .studio-section{padding:61px 0 70px}
  .studio-heading h2{font-size:35px}
  .studio-section .studio-panel{padding:21px 17px}
  .features-editorial{padding:67px 0}
  .features-editorial .features-grid{grid-template-columns:1fr}
  .features-editorial .feature{min-height:auto;padding:23px 0 25px}
  .features-editorial .feature+.feature{border-left:0;border-top:1px solid #35453f;padding:23px 0 25px}
  .features-editorial .feature h3{margin:16px 0 8px}
  .features-editorial .feature p{font-size:13px}
  .roadmap{padding:62px 0}
}
@media(prefers-reduced-motion:reduce){
  .editorial-canvas:before{animation:none}
  .studio-link-secondary{transition:none}
}