*{
  box-sizing:border-box
}

:root{
  --bg:#f9f8f4;
  --ink:#151528;
  --muted:#777581;
  --soft:#efeee9;
  --line:rgba(21,21,40,.09);

  --aqua:#3ddacf;
  --blue:#5e9af6;
  --purple:#b68af4;
  --pink:#f6b4d1;

  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,"Segoe UI",Arial,sans-serif;
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  overflow-x:hidden;

  background:var(--bg);
  color:var(--ink);

  font-family:var(--sans);

  -webkit-font-smoothing:antialiased
}

html[data-theme="dark"]{
  --bg:#11121a;
  --ink:#f8f7f2;
  --muted:#aaa8b3;
  --soft:#191a25;
  --line:rgba(255,255,255,.09)
}

a{
  color:inherit;
  text-decoration:none
}

button{
  font:inherit
}


/* ==========================================================
   NAV
   ========================================================== */

.nav-shell{
  position:sticky;
  top:12px;
  z-index:100;

  width:min(1320px,calc(100% - 32px));
  height:68px;

  margin:12px auto 0;
  padding:0 20px;

  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;

  border:1px solid var(--line);
  border-radius:15px;

  background:rgba(249,248,244,.80);
  backdrop-filter:blur(18px);

  transition:
    box-shadow .3s ease,
    background .3s ease
}

html[data-theme="dark"] .nav-shell{
  background:rgba(17,18,26,.82)
}

.nav-shell.scrolled{
  box-shadow:0 16px 40px rgba(25,20,50,.08)
}

.brand-logo{
  position:relative;

  width:110px;
  height:30px
}

.brand-logo img,
.footer-logo img{
  position:absolute;
  top:50%;
  left:0;

  width:auto;
  max-width:110px;
  max-height:28px;

  transform:translateY(-50%);

  object-fit:contain
}

.logo-light{display:block}
.logo-dark{display:none}

html[data-theme="dark"] .logo-light{display:none}
html[data-theme="dark"] .logo-dark{display:block}

.nav-shell>nav{
  display:flex;
  gap:30px
}

.nav-shell>nav a{
  font-size:13px;
  color:var(--muted);

  transition:color .2s ease
}

.nav-shell>nav a:hover{
  color:var(--ink)
}

.nav-end{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px
}

.language-toggle{
  height:40px;

  display:flex;
  gap:8px;
  align-items:center;

  padding:4px 10px;

  border:1px solid var(--line);
  border-radius:999px;

  background:var(--soft);
  color:var(--ink);

  cursor:pointer
}

.language-toggle b{
  padding:4px 8px;

  border-radius:999px;

  background:var(--bg);

  font-size:11px
}

.language-toggle span{
  opacity:.45;
  font-size:11px
}

.theme-toggle{
  width:40px;
  height:40px;

  border:1px solid var(--line);
  border-radius:50%;

  background:transparent;
  color:inherit;

  cursor:pointer
}

.nav-cta{
  min-width:100px;
  height:42px;

  padding:0 15px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border-radius:999px;

  background:var(--ink);
  color:var(--bg);

  font-size:13px;
  font-weight:650;

  transition:
    transform .2s ease,
    box-shadow .2s ease
}

.nav-cta:hover{
  transform:translateY(-2px);

  box-shadow:0 10px 25px rgba(20,20,35,.16)
}

.nav-cta i{
  font-style:normal
}


/* ==========================================================
   HERO
   ========================================================== */

.hero{
  width:min(1320px,calc(100% - 48px));

  margin:auto;
  padding:90px 0 78px;

  display:grid;
  grid-template-columns:.88fr 1.12fr;
  align-items:center;
  gap:60px
}

.kicker{
  display:flex;
  align-items:center;
  gap:9px;

  color:var(--muted);

  font-size:10px;
  letter-spacing:.16em
}

.kicker-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      var(--aqua),
      var(--blue),
      var(--purple),
      var(--pink)
    )
}

.hero h1{
  max-width:620px;

  margin:20px 0 24px;

  font-size:clamp(54px,5.6vw,76px);
  line-height:.94;
  letter-spacing:-4px
}

.hero h1 span,
.hero h1 em{
  display:block
}

.hero h1 em{
  margin-top:3px;

  font-family:var(--serif);
  font-weight:400;
  font-style:italic;

  letter-spacing:-3px
}

.hero-copy>p{
  max-width:520px;

  margin:0;

  color:var(--muted);

  font-size:16px;
  line-height:1.65
}

.hero-actions{
  margin-top:30px;

  display:flex;
  gap:10px
}

.button-primary,
.button-ghost{
  min-height:48px;

  padding:0 19px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;

  border-radius:999px;

  font-size:13px;
  font-weight:650;

  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease
}

.button-primary{
  background:var(--ink);
  color:var(--bg)
}

.button-ghost{
  border:1px solid var(--line)
}

.button-primary:hover,
.button-ghost:hover{
  transform:translateY(-3px)
}

.button-primary:hover{
  box-shadow:0 14px 30px rgba(21,21,40,.13)
}

.button-primary i{
  font-style:normal
}

.hero-proof{
  margin-top:21px;

  display:flex;
  align-items:center;
  gap:8px;

  color:var(--muted);

  font-size:10px
}

.hero-proof i{
  width:3px;
  height:3px;

  border-radius:50%;

  background:currentColor
}


/* ==========================================================
   HERO BRAND ORBIT
   ========================================================== */

.brand-orbit{
  position:relative;

  height:550px;

  perspective:1200px
}

.orbit-stage{
  position:absolute;
  inset:20px;

  transform-style:preserve-3d;

  transition:transform .12s linear
}

.orbit-glow{
  position:absolute;

  border-radius:50%;

  filter:blur(35px);

  pointer-events:none
}

.glow-a{
  width:360px;
  height:360px;

  top:70px;
  left:120px;

  background:
    radial-gradient(
      circle,
      rgba(61,218,207,.28),
      rgba(94,154,246,.16) 36%,
      transparent 70%
    )
}

.glow-b{
  width:310px;
  height:310px;

  right:50px;
  bottom:55px;

  background:
    radial-gradient(
      circle,
      rgba(246,180,209,.28),
      rgba(182,138,244,.15) 38%,
      transparent 72%
    )
}

.brand-core{
  position:absolute;

  width:190px;
  height:190px;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%)
    translateZ(85px);

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.6);
  border-radius:44px;

  background:rgba(255,255,255,.88);

  box-shadow:
    0 35px 80px rgba(44,35,80,.18),
    0 0 90px rgba(94,154,246,.13);

  backdrop-filter:blur(20px);

  animation:brandBreath 5s ease-in-out infinite
}

html[data-theme="dark"] .brand-core{
  background:rgba(25,26,39,.90);
  border-color:rgba(255,255,255,.08)
}

.brand-core img{
  width:118px;
  height:118px;

  object-fit:contain
}

.core-glow{
  position:absolute;
  inset:-18px;

  z-index:-1;

  border-radius:54px;

  background:
    linear-gradient(
      135deg,
      rgba(61,218,207,.20),
      rgba(94,154,246,.25),
      rgba(182,138,244,.24),
      rgba(246,180,209,.25)
    );

  filter:blur(24px)
}

.orbit-card{
  position:absolute;

  overflow:hidden;

  border:1px solid rgba(21,21,40,.08);
  border-radius:17px;

  background:rgba(255,255,255,.88);

  box-shadow:0 22px 55px rgba(40,34,70,.13);

  backdrop-filter:blur(15px)
}

html[data-theme="dark"] .orbit-card{
  background:rgba(26,27,40,.91);
  border-color:rgba(255,255,255,.08)
}

.card-one{
  width:178px;

  left:12px;
  top:60px;

  transform:
    rotate(-7deg)
    translateZ(15px);

  animation:floatA 6s ease-in-out infinite
}

.card-two{
  width:165px;

  right:3px;
  top:88px;

  transform:
    rotate(7deg)
    translateZ(28px);

  animation:floatB 7s ease-in-out infinite
}

.card-three{
  width:155px;

  left:58px;
  bottom:8px;

  padding:10px;

  transform:
    rotate(5deg)
    translateZ(45px);

  animation:floatB 6.6s ease-in-out infinite
}

.card-four{
  width:178px;

  right:12px;
  bottom:35px;

  padding:16px;

  transform:
    rotate(-4deg)
    translateZ(20px);

  animation:floatA 7.5s ease-in-out infinite
}

.card-five{
  width:142px;

  right:44px;
  top:6px;

  padding:15px;

  transform:
    rotate(3deg)
    translateZ(50px);

  animation:floatB 8s ease-in-out infinite
}

.post-card footer{
  padding:11px 12px 12px
}

.post-card footer strong,
.post-card footer small{
  display:block
}

.post-card footer strong{
  font-size:10px
}

.post-card footer small{
  margin-top:4px;

  color:var(--muted);

  font-size:8px
}

.fake-photo{
  aspect-ratio:.88;

  padding:16px;

  display:flex;
  align-items:flex-end;

  color:white;

  font-family:var(--serif);

  font-size:24px;
  line-height:.9
}

.photo-a{
  background:
    radial-gradient(circle at 70% 20%,#9ae5d9 0,transparent 30%),
    linear-gradient(145deg,#22243d,#5e9af6 60%,#f6b4d1)
}

.photo-b{
  background:
    radial-gradient(circle at 35% 25%,#ffe3b3 0,transparent 28%),
    linear-gradient(145deg,#1c2030,#b68af4 60%,#3ddacf)
}

.reel-art{
  height:110px;

  position:relative;

  overflow:hidden;

  border-radius:11px;

  background:
    linear-gradient(
      140deg,
      #151528,
      #5e9af6,
      #f6b4d1
    )
}

.reel-art div{
  position:absolute;

  width:90px;
  height:90px;

  left:24px;
  top:10px;

  border:1px solid rgba(255,255,255,.45);
  border-radius:50%
}

.reel-art span{
  position:absolute;

  right:9px;
  bottom:7px;

  color:white;

  font-size:9px
}

.reel-card>strong,
.reel-card>small{
  display:block
}

.reel-card>strong{
  margin-top:9px;
  font-size:10px
}

.reel-card>small{
  margin-top:3px;

  color:var(--muted);

  font-size:8px
}

.schedule-card>small,
.account-card>small{
  color:var(--muted);

  font-size:8px;
  letter-spacing:.08em
}

.schedule-card>strong{
  display:block;

  margin:7px 0 11px;

  font-size:27px
}

.schedule-card>div{
  display:flex;
  align-items:center;
  gap:7px;

  color:var(--muted);

  font-size:8px
}

.platform-pill{
  padding:4px 7px;

  border-radius:999px;

  color:#151528;
  background:#dff8f3
}

.avatar-row{
  margin:11px 0 9px;

  display:flex
}

.avatar-row b{
  width:26px;
  height:26px;

  margin-right:-6px;

  display:grid;
  place-items:center;

  border:2px solid white;
  border-radius:50%;

  background:#5e9af6;
  color:white;

  font-size:8px
}

.avatar-row b:nth-child(2){background:#3ddacf}
.avatar-row b:nth-child(3){background:#b68af4}
.avatar-row b:nth-child(4){background:#151528}

.account-card>strong{
  font-size:11px
}


/* ==========================================================
   BRAND STRIP
   ========================================================== */

.brand-strip{
  overflow:hidden;

  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.brand-track{
  width:max-content;

  padding:18px 0;

  display:flex;
  align-items:center;
  gap:35px;

  animation:brandMarquee 30s linear infinite
}

.brand-track span{
  color:var(--muted);

  font-size:10px;
  letter-spacing:.16em
}

.brand-track i{
  color:#b68af4;

  font-style:normal
}


/* ==========================================================
   MANIFESTO
   ========================================================== */

.manifesto{
  width:min(1160px,calc(100% - 48px));

  margin:auto;
  padding:92px 0;

  display:grid;
  grid-template-columns:180px 1fr;
  gap:65px;

  align-items:start
}

.manifesto-mark{
  width:150px;
  height:150px;

  display:grid;
  place-items:center;

  border-radius:34px;

  background:white;

  box-shadow:0 24px 55px rgba(35,30,60,.09)
}

html[data-theme="dark"] .manifesto-mark{
  background:#191a25
}

.manifesto-mark img{
  width:92px;
  height:92px;

  object-fit:contain
}

.section-label{
  color:var(--muted);

  font-size:9px;
  letter-spacing:.18em
}

.manifesto h2{
  max-width:790px;

  margin:12px 0 18px;

  font-size:clamp(38px,4.3vw,58px);
  line-height:1;
  letter-spacing:-2.8px
}

.manifesto h2 span,
.manifesto h2 em{
  display:block
}

.manifesto h2 em{
  margin-top:4px;

  font-family:var(--serif);
  font-weight:400
}

.manifesto p{
  max-width:610px;

  margin:0;

  color:var(--muted);

  line-height:1.7
}


/* ==========================================================
   SHOWCASE
   ========================================================== */

.showcase-row{
  width:min(1160px,calc(100% - 48px));

  margin:auto;
  padding:72px 0;

  display:grid;
  grid-template-columns:.72fr 1.28fr;
  align-items:center;
  gap:70px;

  border-top:1px solid var(--line)
}

.showcase-row.reversed{
  grid-template-columns:1.28fr .72fr
}

.showcase-row.reversed .showcase-copy{
  order:2
}

.showcase-row.reversed .product-canvas{
  order:1
}

.number{
  color:var(--muted);

  font-size:9px
}

.showcase-copy h3{
  max-width:420px;

  margin:16px 0 13px;

  font-size:34px;
  line-height:1.02;
  letter-spacing:-1.7px
}

.showcase-copy h3 span,
.showcase-copy h3 em{
  display:block
}

.showcase-copy h3 em{
  font-family:var(--serif);
  font-weight:400
}

.showcase-copy p{
  max-width:430px;

  color:var(--muted);

  line-height:1.65
}

.product-canvas{
  padding:26px;

  border:1px solid var(--line);
  border-radius:20px;

  background:rgba(255,255,255,.73);

  box-shadow:0 28px 65px rgba(30,25,55,.08)
}

html[data-theme="dark"] .product-canvas{
  background:rgba(255,255,255,.025)
}


/* LIBRARY */

.canvas-nav{
  margin-bottom:22px;

  display:flex;
  justify-content:space-between;
  align-items:center
}

.canvas-nav>div{
  display:flex;
  align-items:center;
  gap:9px
}

.canvas-nav img{
  width:20px;
  height:20px;

  object-fit:contain
}

.canvas-nav b{
  font-size:11px
}

.canvas-nav button{
  padding:7px 11px;

  border:0;
  border-radius:8px;

  background:var(--ink);
  color:var(--bg);

  font-size:9px
}

.library-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px
}

.library-grid article{
  overflow:hidden;

  border:1px solid var(--line);
  border-radius:12px
}

.art{
  position:relative;

  aspect-ratio:1/.86;

  padding:15px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  color:white
}

.art span{
  font-size:8px
}

.art strong{
  font-family:var(--serif);

  font-size:26px;
  font-weight:400
}

.art-a{
  background:
    radial-gradient(circle at 85% 5%,#90efe1,transparent 35%),
    linear-gradient(145deg,#151528,#5e9af6)
}

.art-b{
  background:
    radial-gradient(circle at 30% 20%,#f7d9a7,transparent 28%),
    linear-gradient(145deg,#22243d,#b68af4)
}

.art-c{
  background:
    radial-gradient(circle at 70% 15%,#f8d0e0,transparent 30%),
    linear-gradient(145deg,#33375e,#3ddacf)
}

.library-grid footer{
  padding:10px
}

.library-grid footer b,
.library-grid footer small{
  display:block
}

.library-grid footer b{
  font-size:9px
}

.library-grid footer small{
  margin-top:3px;

  color:var(--muted);

  font-size:8px
}


/* SCHEDULER */

.calendar-head{
  margin-bottom:16px;

  display:flex;
  justify-content:space-between;
  align-items:center
}

.calendar-head>div small,
.calendar-head>div strong{
  display:block
}

.calendar-head small{
  color:var(--muted);

  font-size:8px;
  letter-spacing:.1em
}

.calendar-head strong{
  margin-top:4px;

  font-size:13px
}

.calendar-head>span{
  color:var(--muted);

  font-size:9px
}

.queue{
  display:grid;
  gap:8px
}

.queue>div{
  min-height:66px;

  padding:0 14px;

  display:grid;
  grid-template-columns:55px 10px 1fr auto;
  align-items:center;
  gap:12px;

  border:1px solid var(--line);
  border-radius:11px
}

.queue time{
  color:var(--muted);

  font-size:9px
}

.queue .dot{
  width:7px;
  height:7px;

  border-radius:50%
}

.aqua{background:var(--aqua)}
.blue{background:var(--blue)}
.pink{background:var(--pink)}

.queue span b,
.queue span small{
  display:block
}

.queue span b{
  font-size:10px
}

.queue span small{
  margin-top:3px;

  color:var(--muted);

  font-size:8px
}

.queue em{
  color:var(--muted);

  font-size:7px;
  font-style:normal;
  letter-spacing:.1em
}


/* ACCOUNTS */

.accounts-canvas{
  display:grid;
  gap:10px
}

.account-item{
  min-height:72px;

  padding:11px 13px;

  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:12px;
  align-items:center;

  border:1px solid var(--line);
  border-radius:12px
}

.avatar{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border-radius:11px;

  color:white;

  font-size:11px
}

.gradient-1{
  background:linear-gradient(135deg,#3ddacf,#5e9af6)
}

.gradient-2{
  background:linear-gradient(135deg,#5e9af6,#b68af4)
}

.gradient-3{
  background:linear-gradient(135deg,#b68af4,#f6b4d1)
}

.account-item span b,
.account-item span small{
  display:block
}

.account-item span b{
  font-size:10px
}

.account-item span small{
  margin-top:4px;

  color:var(--muted);

  font-size:8px
}

.account-item>i{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#59a68a
}


/* ==========================================================
   BRAND MOMENT
   ========================================================== */

.identity-break{
  position:relative;

  width:min(1320px,calc(100% - 48px));
  min-height:420px;

  margin:70px auto;
  padding:60px;

  overflow:hidden;

  display:flex;
  align-items:center;
  gap:55px;

  border-radius:28px;

  background:#151528;
  color:white
}

.identity-bg{
  position:absolute;
  inset:-30%;

  background:
    radial-gradient(
      circle at 25% 30%,
      rgba(61,218,207,.28),
      transparent 24%
    ),
    radial-gradient(
      circle at 65% 35%,
      rgba(94,154,246,.26),
      transparent 25%
    ),
    radial-gradient(
      circle at 75% 70%,
      rgba(246,180,209,.24),
      transparent 25%
    ),
    radial-gradient(
      circle at 40% 80%,
      rgba(182,138,244,.22),
      transparent 24%
    );

  filter:blur(15px);

  animation:ambientMove 16s ease-in-out infinite alternate
}

.identity-break>img{
  position:relative;
  z-index:1;

  width:150px;
  height:150px;

  object-fit:contain;

  filter:drop-shadow(0 18px 30px rgba(0,0,0,.16))
}

.identity-break>div:last-child{
  position:relative;
  z-index:1
}

.identity-break small{
  opacity:.55;

  font-size:9px;
  letter-spacing:.2em
}

.identity-break h2{
  max-width:710px;

  margin:14px 0 0;

  font-size:clamp(38px,4.3vw,58px);
  line-height:1;
  letter-spacing:-2.8px
}

.identity-break h2 span,
.identity-break h2 em{
  display:block
}

.identity-break h2 em{
  margin-top:3px;

  font-family:var(--serif);
  font-weight:400
}


/* ==========================================================
   WORKFLOW
   ========================================================== */

.workflow,
.pricing,
.faq{
  width:min(1160px,calc(100% - 48px));

  margin:auto;
  padding:88px 0
}

.workflow{
  border-top:1px solid var(--line)
}

.section-heading{
  margin-bottom:48px
}

.section-heading h2{
  margin:12px 0 0;

  font-size:clamp(38px,4.2vw,55px);
  line-height:1;
  letter-spacing:-2.5px
}

.section-heading h2 span,
.section-heading h2 em{
  display:block
}

.section-heading h2 em{
  font-family:var(--serif);
  font-weight:400
}

.flow-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr)
}

.flow-grid article{
  min-height:200px;

  padding:24px 21px;

  border-top:1px solid var(--line);
  border-right:1px solid var(--line)
}

.flow-grid article:last-child{
  border-right:0
}

.flow-grid article>span{
  color:var(--muted);

  font-size:8px
}

.flow-grid article strong{
  display:block;

  margin-top:50px;

  font-size:20px
}

.flow-grid article p{
  margin:10px 0 0;

  color:var(--muted);

  font-size:12px;
  line-height:1.55
}


/* ==========================================================
   PRICING
   ========================================================== */

.pricing{
  display:grid;
  grid-template-columns:1fr 430px;
  gap:90px;
  align-items:center;

  border-top:1px solid var(--line)
}

.pricing-copy h2{
  margin:12px 0 18px;

  font-size:clamp(40px,4.4vw,58px);
  line-height:1;
  letter-spacing:-2.8px
}

.pricing-copy h2 span,
.pricing-copy h2 em{
  display:block
}

.pricing-copy h2 em{
  font-family:var(--serif);
  font-weight:400
}

.pricing-copy p{
  max-width:500px;

  color:var(--muted);

  line-height:1.65
}

.price-card{
  overflow:hidden;

  border:1px solid var(--line);
  border-radius:20px;

  background:rgba(255,255,255,.73);

  box-shadow:0 28px 65px rgba(35,30,60,.08)
}

html[data-theme="dark"] .price-card{
  background:rgba(255,255,255,.025)
}

.price-card header{
  position:relative;

  padding:28px 28px 23px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(246,180,209,.22),
      transparent 40%
    ),
    radial-gradient(
      circle at 70% 0%,
      rgba(182,138,244,.16),
      transparent 42%
    )
}

.price-card header>span{
  color:var(--muted);

  font-size:8px;
  letter-spacing:.15em
}

.price-card header strong{
  display:block;

  margin:12px 0 5px;

  font-size:43px;
  letter-spacing:-2px
}

.price-card header small{
  color:var(--muted)
}

.purchase-steps{
  margin:20px 0 0;
  padding:0;
  display:grid;
  gap:8px;
  list-style:none;
  counter-reset:purchase-step;
  color:var(--muted);
  font-size:11px;
  line-height:1.45
}

.purchase-steps li{
  display:flex;
  align-items:center;
  gap:9px;
  counter-increment:purchase-step
}

.purchase-steps li::before{
  content:counter(purchase-step);
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  flex:0 0 19px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  font-size:9px;
  font-weight:700
}

.price-card ul{
  margin:0;
  padding:22px 28px;

  display:grid;
  gap:11px;

  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);

  list-style:none;

  font-size:12px
}

.price-card>a{
  height:50px;

  margin:18px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;

  border-radius:999px;

  background:var(--ink);
  color:var(--bg);

  font-size:12px;
  font-weight:650;

  transition:transform .2s ease
}

.price-card>a:hover{
  transform:translateY(-2px)
}

.price-card>a i{
  font-style:normal
}


/* ==========================================================
   FINAL CTA
   ========================================================== */

.final-cta{
  position:relative;

  width:min(1320px,calc(100% - 48px));

  margin:65px auto;
  padding:90px 30px;

  overflow:hidden;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;

  border:1px solid var(--line);
  border-radius:30px;

  background:rgba(255,255,255,.62)
}

html[data-theme="dark"] .final-cta{
  background:rgba(255,255,255,.025)
}

.final-glow{
  position:absolute;

  width:650px;
  height:420px;

  top:-190px;
  left:50%;

  transform:translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(61,218,207,.22),
      rgba(94,154,246,.16) 28%,
      rgba(182,138,244,.13) 46%,
      rgba(246,180,209,.10) 58%,
      transparent 72%
    );

  filter:blur(20px)
}

.final-mark{
  position:relative;

  width:115px;
  height:115px;

  margin-bottom:27px;

  display:grid;
  place-items:center;

  border-radius:27px;

  background:white;

  box-shadow:
    0 20px 50px rgba(35,30,60,.11),
    0 0 60px rgba(94,154,246,.11);

  animation:brandBreath 5s ease-in-out infinite
}

.final-mark img{
  width:76px;
  height:76px;

  object-fit:contain
}

.final-cta>*:not(.final-glow){
  position:relative
}

.final-cta h2{
  max-width:720px;

  margin:13px 0 16px;

  font-size:clamp(39px,4.4vw,58px);
  line-height:1;
  letter-spacing:-2.8px
}

.final-cta h2 span,
.final-cta h2 em{
  display:block
}

.final-cta h2 em{
  margin-top:3px;

  font-family:var(--serif);
  font-weight:400
}

.final-cta p{
  max-width:490px;

  margin:0;

  color:var(--muted);

  line-height:1.65
}

.big-button{
  margin-top:26px
}


/* ==========================================================
   FAQ
   ========================================================== */

.faq{
  border-top:1px solid var(--line)
}

.faq-list details{
  border-top:1px solid var(--line)
}

.faq-list details:last-child{
  border-bottom:1px solid var(--line)
}

.faq-list summary{
  position:relative;

  padding:23px 45px 23px 0;

  cursor:pointer;
  list-style:none;

  font-size:14px;
  font-weight:650
}

.faq-list summary::-webkit-details-marker{
  display:none
}

.faq-list summary::after{
  content:"+";

  position:absolute;
  right:7px;

  font-size:20px;
  font-weight:400;

  transition:transform .25s ease
}

.faq-list details[open] summary::after{
  transform:rotate(45deg)
}

.faq-list p{
  max-width:700px;

  margin:0;
  padding:0 0 23px;

  color:var(--muted);

  font-size:13px;
  line-height:1.65
}


/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer{
  position:relative;

  width:min(1160px,calc(100% - 48px));

  margin:auto;
  padding:44px 0 50px;

  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;

  border-top:1px solid var(--line)
}

.footer-logo{
  position:relative;

  width:100px;
  height:28px
}

.site-footer>span{
  text-align:center;

  color:var(--muted);

  font-size:10px
}

.site-footer nav{
  display:flex;
  justify-content:flex-end;
  gap:20px
}

.site-footer nav a{
  color:var(--muted);

  font-size:11px
}


/* ==========================================================
   MOTION
   ========================================================== */

.motion .reveal{
  opacity:0;

  transform:translateY(25px);

  transition:
    opacity .8s cubic-bezier(.2,.8,.2,1),
    transform .8s cubic-bezier(.2,.8,.2,1)
}

.motion .reveal.visible{
  opacity:1;

  transform:translateY(0)
}

@keyframes brandBreath{
  0%,100%{
    transform:
      translate(-50%,-50%)
      translateZ(85px)
      scale(1)
  }

  50%{
    transform:
      translate(-50%,-50%)
      translateZ(85px)
      scale(1.025)
  }
}

.final-mark{
  animation:finalBreath 5s ease-in-out infinite
}

@keyframes finalBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}

@keyframes floatA{
  0%,100%{translate:0 0}
  50%{translate:0 -8px}
}

@keyframes floatB{
  0%,100%{translate:0 0}
  50%{translate:0 10px}
}

@keyframes brandMarquee{
  to{transform:translateX(-50%)}
}

@keyframes ambientMove{
  0%{transform:translate3d(-3%,-2%,0) scale(1)}
  100%{transform:translate3d(5%,4%,0) scale(1.08)}
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:900px){

  .nav-shell{
    grid-template-columns:1fr auto
  }

  .nav-shell>nav{
    display:none
  }

  .hero{
    grid-template-columns:1fr;

    gap:35px;

    padding-top:70px
  }

  .brand-orbit{
    height:510px
  }

  .manifesto{
    grid-template-columns:120px 1fr;

    gap:35px
  }

  .manifesto-mark{
    width:115px;
    height:115px
  }

  .manifesto-mark img{
    width:72px;
    height:72px
  }

  .showcase-row,
  .showcase-row.reversed{
    grid-template-columns:1fr;

    gap:40px
  }

  .showcase-row.reversed .showcase-copy,
  .showcase-row.reversed .product-canvas{
    order:initial
  }

  .pricing{
    grid-template-columns:1fr;

    gap:40px
  }

}


@media(max-width:620px){

  .nav-shell{
    width:calc(100% - 20px);
    top:9px;

    height:60px;

    margin-top:9px;

    padding:0 12px
  }

  .brand-logo{
    width:88px
  }

  .brand-logo img{
    max-width:88px
  }

  .language-toggle{
    display:none
  }

  .theme-toggle{
    display:none
  }

  .nav-cta{
    min-width:80px;
    height:38px
  }

  .hero,
  .manifesto,
  .showcase-row,
  .workflow,
  .pricing,
  .faq{
    width:calc(100% - 32px)
  }

  .hero{
    padding:58px 0 45px
  }

  .hero h1{
    font-size:48px;

    letter-spacing:-2.7px
  }

  .hero h1 em{
    letter-spacing:-2px
  }

  .hero-actions{
    flex-direction:column
  }

  .brand-orbit{
    height:415px
  }

  .orbit-stage{
    inset:0
  }

  .brand-core{
    width:145px;
    height:145px;

    border-radius:34px
  }

  .brand-core img{
    width:90px;
    height:90px
  }

  .card-one{
    width:125px
  }

  .card-two{
    width:120px
  }

  .card-three{
    width:118px
  }

  .card-four{
    width:145px;

    right:0
  }

  .card-five{
    display:none
  }

  .manifesto{
    padding:65px 0;

    grid-template-columns:1fr
  }

  .manifesto-mark{
    width:90px;
    height:90px
  }

  .manifesto-mark img{
    width:58px;
    height:58px
  }

  .manifesto h2{
    font-size:40px
  }

  .showcase-row{
    padding:55px 0
  }

  .showcase-copy h3{
    font-size:30px
  }

  .product-canvas{
    padding:17px
  }

  .library-grid{
    grid-template-columns:1fr
  }

  .identity-break{
    width:calc(100% - 20px);

    min-height:390px;

    margin:45px auto;
    padding:35px 25px;

    flex-direction:column;
    align-items:flex-start;

    border-radius:22px
  }

  .identity-break>img{
    width:100px;
    height:100px
  }

  .identity-break h2{
    font-size:40px
  }

  .workflow,
  .pricing,
  .faq{
    padding:65px 0
  }

  .flow-grid{
    grid-template-columns:1fr
  }

  .flow-grid article{
    min-height:145px;

    border-right:0
  }

  .flow-grid article strong{
    margin-top:28px
  }

  .final-cta{
    width:calc(100% - 20px);

    margin:40px auto;

    padding:65px 22px;

    border-radius:22px
  }

  .final-cta h2{
    font-size:40px
  }

  .site-footer{
    width:calc(100% - 32px);

    grid-template-columns:1fr;
    gap:22px
  }

  .site-footer>span{
    text-align:left
  }

  .site-footer nav{
    justify-content:flex-start
  }

}


@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important
  }

  .motion .reveal{
    opacity:1 !important;
    transform:none !important
  }

}

/* ============================================================
   LANDING TELEGRAM SUPPORT
   ============================================================ */

.landing-support-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.landing-support-link{
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--muted);
  background:transparent;
  font-size:12px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    transform .2s ease;
}

.landing-support-link svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
}

.landing-support-link:hover{
  color:var(--ink);
  border-color:color-mix(in srgb,var(--ink) 24%,transparent);
  background:var(--soft);
  transform:translateY(-1px);
}

html[data-theme="dark"] .landing-support-link:hover{
  border-color:rgba(255,255,255,.20);
}

@media (max-width:1180px){
  .landing-support-link{
    width:38px;
    min-width:38px;
    padding:0;
  }

  .landing-support-link span{
    display:none;
  }
}

@media (max-width:760px){
  .landing-support-actions{
    gap:4px;
  }

  .landing-support-link{
    width:36px;
    min-width:36px;
    height:36px;
    border-radius:10px;
  }
}


/* LETRAS LANDING V4 — align public site with app family */
.nav-shell{top:0;width:100%;height:64px;margin:0 auto;padding:0 max(24px,calc((100vw - 1180px)/2));border:0!important;border-radius:0!important;background:color-mix(in srgb,var(--bg) 88%,transparent)!important;box-shadow:none!important;backdrop-filter:blur(18px)}.hero{width:min(1180px,calc(100% - 48px));padding:82px 0 70px;gap:48px}.hero h1{font-family:Inter,"Segoe UI Variable Display",system-ui,sans-serif;font-size:clamp(50px,5vw,68px);line-height:.98;letter-spacing:-.05em}.hero h1 em{font-family:inherit;font-style:normal;font-weight:700;letter-spacing:inherit}.hero-copy>p{font-size:15px;max-width:560px}.brand-strip{border-color:var(--line)}.manifesto,.showcase-row,.workflow,.pricing,.faq{width:min(1120px,calc(100% - 48px))}.manifesto-mark,.product-canvas,.price-card,.final-cta{border-color:transparent!important;box-shadow:0 1px 2px rgba(23,23,22,.02),0 18px 52px rgba(23,23,22,.06)!important}.showcase-row{border-top-color:var(--line)}.final-cta{width:min(1180px,calc(100% - 48px));border-radius:16px!important;background:var(--surface)!important}.site-footer{width:min(1120px,calc(100% - 48px))}html[data-theme="dark"] .manifesto-mark,html[data-theme="dark"] .product-canvas,html[data-theme="dark"] .price-card,html[data-theme="dark"] .final-cta{box-shadow:0 18px 52px rgba(0,0,0,.22)!important}@media(max-width:760px){.nav-shell{padding-inline:16px}.hero{width:calc(100% - 32px);padding-top:56px}.hero h1{font-size:45px}.manifesto,.showcase-row,.workflow,.pricing,.faq,.site-footer{width:calc(100% - 32px)}}