/* Optra Studio's home (studio.optracloud.com/ for a visitor with no session).
   THE LOOK (agent014, 8 Oct 2026; Sumit: "update our website just like prompt wise see what they have and write similar don't copy them"): a warm cream hero under a floating
   rounded header, one large light headline, pill buttons with a round chip, then calm cool-grey sections of white rounded cards, and a plans grid of tall rounded cards with a
   tinted strip. The brand stays ours: the ribbon mark, #230078 deep violet, #7680F6 periwinkle, #C59AF9 lavender, #0B0C11 ground. The type is Figtree, an open (OFL) variable
   font served from this site (figtree-latin.woff2): no outside request. No inline style anywhere in the page: the policy is style-src 'self'.

   ONE SHAPE RULE (launch, 10 Oct 2026; docs/optra-studio/saas/HOME-DESIGN-PLAN.md): cards 28px (--r-card); media (a picture, a film thumbnail, the video frame) 20px (--r-media), and a card that holds a
   picture is the picture's radius plus its padding (28 = 20 + 8); pills and chips 999px / 50%; the menu's own links 12px (its panel 20px minus its 8px padding); the hero's bottom edge 48px (32px on a
   phone). Nothing else: tests/test_the_home_uses_one_radius_rule.py holds it.
   ONE MOTION VOCABULARY: a pressable answers the person who presses it and nothing moves on its own. Every pressable carries the one transition set below, every press scales to .97 (a wide row
   tints instead), every hover sits inside (hover:hover) and (pointer:fine) so a touch is not a hover, and smooth scrolling is only for a person who has not asked for reduced motion.
   tests/test_the_home_has_one_press_and_hover_system.py finds every pressable by its selector, so a control added later fails there before it ships. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 800;font-display:swap;src:url("/home/figtree-latin.woff2?v=4ba7d3d09669") format("woff2")}
:root{
  --cream:#F4EEE5; --cream-2:#EFE6DA; --cool:#F2F4F9; --panel:#FFFFFF; --ink:#16171D; --muted:#5E6070; --rule:#E3E6EE; --soft:#ECEFF6;
  --brand:#230078; --brand-2:#7680F6; --brand-3:#C59AF9; --brand-soft:#ECEBFF; --on-brand:#FFFFFF;
  --pill:#16171D; --on-pill:#FFFFFF; --chip:linear-gradient(135deg,#7680F6,#C59AF9);
  --shadow:0 1px 2px #1617200d, 0 14px 40px #16172014;
  --r-card:28px; --r-media:20px; --r-pill:999px; --r-sheet:48px;
  --ease:cubic-bezier(.23,1,.32,1);
  --sans:"Figtree","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --cream:#12131B; --cream-2:#171826; --cool:#0E0F16; --panel:#171925; --ink:#ECECF5; --muted:#A0A2B6; --rule:#262938; --soft:#1D2030;
    --brand:#9AA2FA; --brand-soft:#7680F61f; --on-brand:#0B0C11; --pill:#ECECF5; --on-pill:#0B0C11;
    --shadow:0 1px 2px #00000050, 0 14px 40px #00000040;
  }
}
:root[data-theme="dark"]{
  --cream:#12131B; --cream-2:#171826; --cool:#0E0F16; --panel:#171925; --ink:#ECECF5; --muted:#A0A2B6; --rule:#262938; --soft:#1D2030;
  --brand:#9AA2FA; --brand-soft:#7680F61f; --on-brand:#0B0C11; --pill:#ECECF5; --on-pill:#0B0C11;
  --shadow:0 1px 2px #00000050, 0 14px 40px #00000040;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--cool);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--sans);font-weight:500;line-height:1.08;letter-spacing:-.02em;margin:0 0 .45em;text-wrap:balance}
h1{font-size:clamp(2.7rem,7.4vw,5.1rem);font-weight:400;letter-spacing:-.035em}
h2{font-size:clamp(2rem,4.6vw,3.2rem);text-align:center}
h3{font-size:1.3rem;letter-spacing:-.01em}
section{padding:96px 0}
.sub{color:var(--muted);text-align:center;max-width:640px;margin:-8px auto 0;font-size:1.1rem}

/* ---- the floating header --------------------------------------------------------------------------------------------------------------- */
.top{position:sticky;top:12px;z-index:20;padding:0 12px}
.bar{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px 10px 8px 18px;
  background:var(--panel);border-radius:var(--r-pill);box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:1.1rem;letter-spacing:-.01em}
.logo{display:block;border-radius:22%}
nav.main{display:flex;gap:6px;font-size:.98rem}
nav.main a{color:var(--ink);text-decoration:none;padding:8px 14px;border-radius:var(--r-pill)}
.bar-end{display:flex;align-items:center;gap:8px}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;padding:10px 16px;border-radius:var(--r-pill);background:var(--soft);font-weight:600;font-size:.95rem}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;display:flex;flex-direction:column;gap:2px;background:var(--panel);border-radius:var(--r-media);padding:8px;box-shadow:var(--shadow)}
.menu nav a{color:var(--ink);text-decoration:none;padding:10px 14px;border-radius:12px}
.menu nav a.menu-join{background:var(--pill);color:var(--on-pill);font-weight:600;text-align:center;margin-bottom:6px}
@media (min-width:641px){.menu nav a.menu-join{display:none}}
@media (max-width:900px){nav.main{display:none}.menu{display:block}}

/* ---- pill buttons: a near-black pill with a round chip, a white pill, a ghost pill ---------------------------------------------------------- */
.btn,.pill{display:inline-flex;align-items:center;gap:12px;background:var(--pill);color:var(--on-pill);text-decoration:none;font-weight:600;font-size:1rem;
  padding:6px 22px 6px 6px;border-radius:var(--r-pill);border:0;font-family:inherit;cursor:pointer;box-shadow:none}
.btn::before,.pill .chip{content:"\2192";display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--chip);color:#0B0C11;font-size:1.1rem;font-weight:700}
.pill .chip{content:none}
.pill .chip::before{content:"\2192"}
.btn.off{background:var(--panel);color:var(--ink);cursor:default;box-shadow:var(--shadow)}
.btn.off::before{content:"\2022";background:var(--soft);color:var(--brand-2)}
.pill.light{background:var(--panel);color:var(--ink)}
.pill.light .chip{background:var(--pill);color:var(--on-pill)}
.pill.ghost{background:var(--panel);color:var(--ink);padding:10px 20px;box-shadow:inset 0 0 0 1px var(--rule)}
.pill.sm{font-size:.95rem}
.pill.sm .chip{width:34px;height:34px}

/* THE PRESS AND HOVER SYSTEM: one transition set on every pressable, one press state, hovers only where a pointer can hover. A wide row (a menu link, a question) tints and barely scales. */
.btn,.pill,.wa,nav.main a,.menu summary,.menu nav a,.curtog button,.film button,#faq summary{
  transition:transform 160ms var(--ease),background-color 160ms var(--ease),box-shadow 160ms var(--ease),filter 160ms var(--ease);-webkit-tap-highlight-color:transparent}
.btn:active,.pill:active,.wa:active,.menu summary:active,.curtog button:active,.film button:active{transform:scale(.97)}
nav.main a:active,.menu nav a:active{transform:scale(.97);background:var(--soft)}
#faq summary:active{transform:scale(.99)}
.btn.off:active{transform:none}
@media (hover:hover) and (pointer:fine){
  .btn:hover,.pill:hover,.wa:hover{filter:brightness(1.12)}
  .btn.off:hover{filter:none}
  nav.main a:hover,.menu nav a:hover{background:var(--soft)}
  .menu summary:hover{filter:brightness(.96)}
  .curtog button:hover{color:var(--ink)}
  .film button:hover{box-shadow:0 10px 30px #16172026}
  #faq summary:hover{color:var(--brand)}
}
.btn:focus-visible,.pill:focus-visible,summary:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--brand-2);outline-offset:3px}

/* ---- the hero: cream, a soft glow, a centred headline, two pills, one big rounded picture -------------------------------------------------------- */
.hero{position:relative;background:var(--cream);padding:96px 0 0;margin-top:-72px;text-align:center;display:flow-root;border-radius:0 0 var(--r-sheet) var(--r-sheet);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(60% 55% at 12% 70%,#C59AF955,transparent 70%),radial-gradient(55% 50% at 90% 60%,#7680F644,transparent 70%),radial-gradient(70% 60% at 50% 0%,#FFFFFF66,transparent 70%)}
.hero-copy{max-width:860px;margin:0 auto}
.lede{font-size:1.22rem;color:var(--muted);max-width:34rem;margin:22px auto 0;text-wrap:balance}
.cta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:34px 0 14px}
.note{font-size:.93rem;color:var(--muted);max-width:620px;margin:0 auto}
.hero-pic{margin:52px auto -150px;max-width:1000px;position:relative}
.hero-pic img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r-media);box-shadow:0 30px 80px #16172033;background:var(--soft);object-fit:cover}
.hero-pic figcaption,.frame figcaption{margin:14px auto 0;max-width:40rem;color:var(--muted);font-size:.92rem;text-wrap:balance}
.after-hero{padding-top:230px}
/* Where the page is narrower than the picture plus the hero's two corners (1000 + 2 x 48), the cream panel's rounded edge would show behind the picture at its sides, a seam: below that width the picture sits
   wholly inside the panel and the panel ends under its caption (the films producer's read of the live home at 390 px, 10 Oct). */
@media (max-width:1100px){
  .hero{padding-bottom:48px}
  .hero-pic{margin-bottom:0}
  .after-hero{padding-top:96px}
}

/* ---- sections, cards, steps ----------------------------------------------------------------------------------------------------------------- */
.band{background:transparent}
.cards{display:grid;gap:18px;margin-top:44px;grid-template-columns:1fr}
@media (min-width:640px){.cards.three,.cards.four{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.cards.three{grid-template-columns:repeat(3,1fr)}.cards.four{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--panel);border-radius:var(--r-card);padding:30px 28px 32px;min-height:190px;display:flex;flex-direction:column;justify-content:flex-end}
.card h3{margin-bottom:8px}
.card p{margin:0;color:var(--muted)}
.steps{list-style:none;counter-reset:s;padding:0;margin:44px 0 0;display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.steps{grid-template-columns:repeat(6,1fr)}.steps li{grid-column:span 2}.steps li:nth-child(n+4){grid-column:span 3}}
.steps li{counter-increment:s;background:var(--panel);border-radius:var(--r-card);padding:28px}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--chip);color:#0B0C11;font-weight:700;margin-bottom:34px}
.steps b{display:block;font-size:1.25rem;font-weight:500;letter-spacing:-.01em;margin-bottom:6px}
.steps span{color:var(--muted)}
.two{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.two p{color:var(--muted)}
.inside{display:grid;gap:40px;grid-template-columns:1fr;align-items:center;margin-top:48px}
@media (min-width:900px){.inside{grid-template-columns:1.1fr .9fr;gap:72px}}
.facts{list-style:none;margin:0;padding:0}
.facts li{padding:22px 0;border-top:1px solid var(--rule)}
.facts li:first-child{border-top:0;padding-top:0}
.facts h3{font-size:1.15rem;margin-bottom:6px}
.facts p{margin:0;color:var(--muted)}
.frame{margin:0}
.frame img{display:block;width:100%;height:auto;aspect-ratio:560/380;object-fit:cover;border-radius:var(--r-media);box-shadow:var(--shadow);background:var(--soft)}
.frame figcaption{margin:14px 0 0}
.rows{list-style:none;margin:44px auto 0;padding:0;max-width:820px}
.rows li{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:6px 32px;align-items:baseline;padding:24px 0;border-top:1px solid var(--rule)}
.rows li:last-child{border-bottom:1px solid var(--rule)}
.rows h3{margin:0;font-size:1.2rem}
.rows p{margin:0;color:var(--muted)}
@media (max-width:640px){.rows li{grid-template-columns:1fr}}

.films{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:44px}
.film{margin:0;background:var(--panel);border-radius:var(--r-card);padding:8px 8px 18px}
.film button{display:block;width:100%;padding:0;border:0;background:var(--soft);border-radius:var(--r-media);overflow:hidden;aspect-ratio:16/9;position:relative;cursor:pointer}
.film img{display:block;width:100%;height:100%;object-fit:cover}
.film button::after{content:"";position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;background:#16171dcc url("/home/play.svg?v=7d0b926db3ca") 55% 50%/24px no-repeat}
.film iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-media)}
.film figcaption{margin:14px 14px 0;font-size:1.05rem;font-weight:500}
.film figcaption small{display:block;color:var(--muted);font-weight:400;font-size:.92rem}
.film-play{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- plans: tall rounded cards, each with a tinted strip ------------------------------------------------------------------------------------- */
.plans-head{display:flex;flex-direction:column;align-items:center;gap:14px}
.curtog{display:inline-flex;background:var(--panel);border-radius:var(--r-pill);padding:4px;box-shadow:var(--shadow)}
.curtog button{font:inherit;font-size:.92rem;border:0;background:transparent;color:var(--muted);padding:8px 18px;border-radius:var(--r-pill);cursor:pointer}
.curtog button[aria-pressed="true"]{background:var(--pill);color:var(--on-pill)}
.plans-state{text-align:center}
.plans{display:grid;gap:18px;grid-template-columns:1fr;margin-top:44px;align-items:stretch}
@media (min-width:700px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:var(--panel);border-radius:var(--r-card);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 2px #16172008}
.plan .strip{padding:14px 24px;font-size:.95rem;font-weight:600;text-align:center;background:var(--soft);color:var(--ink)}
.plan.t-free .strip{background:#E9E6DF}
.plan.t-1 .strip{background:#E4E8F2}
.plan.t-2 .strip{background:#CFD4FB}
.plan.t-3 .strip{background:#E4D2FB}
.plan.t-ent .strip{background:var(--pill);color:var(--on-pill)}
.plan.t-agency .strip{background:var(--brand);color:#fff}
.plan .body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.plan h3{font-size:1.5rem;margin-bottom:2px}
.plan .for{color:var(--muted);margin:0 0 10px;font-size:.98rem}
.price{font-size:2.9rem;font-weight:500;letter-spacing:-.03em;margin:8px 0 14px;line-height:1}
.price small{font-size:1rem;font-weight:400;color:var(--muted);letter-spacing:0}
.price.reach{font-size:1.8rem}
.plan ul{padding:0;margin:6px 0 0;list-style:none;color:var(--ink)}
.plan li{margin:9px 0;padding-left:28px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border-radius:50%;background:var(--chip)}
.plan .go{margin-top:auto;padding-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.plan.lead{outline:3px solid var(--brand-2);outline-offset:-3px}
.unlimited{margin:34px auto 0;max-width:860px;background:var(--panel);border-radius:var(--r-card);padding:26px 30px;text-align:center}
.unlimited h3{margin-bottom:6px}
.unlimited p{margin:0;color:var(--muted)}
.reach-line{margin:30px auto 0;text-align:center;font-size:1.1rem}
.reach-line a{font-weight:600}

/* ---- assistant, FAQ, last, footer ------------------------------------------------------------------------------------------------------------- */
#assistant .wrap{max-width:820px;text-align:center}
#assistant p{color:var(--muted);margin:0 auto}
.badge{display:inline-block;vertical-align:middle;font:600 .85rem/1 var(--sans);color:var(--brand);background:var(--brand-soft);border-radius:var(--r-pill);padding:7px 12px;margin-left:8px}
#faq .wrap{max-width:820px}
#faq details{background:var(--panel);border-radius:var(--r-card);padding:6px 24px;margin:12px 0}
#faq summary{cursor:pointer;font-weight:500;font-size:1.08rem;padding:16px 28px 16px 0;list-style:none;position:relative}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:300}
#faq details[open] summary::after{content:"\2212"}
#faq details p{color:var(--muted);margin:0 0 16px}
.last{text-align:center}
.last .cta{margin-top:28px}
footer{padding:44px 0 90px;font-size:.95rem;color:var(--muted)}
.foot{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center}
.foot a{color:var(--muted)}
.soon{opacity:.75}
.foot .lockup{border-radius:22%}

/* ---- the WhatsApp chat button, bottom right of every screen -------------------------------------------------------------------------------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:30;display:inline-flex;align-items:center;gap:10px;background:var(--pill);color:var(--on-pill);text-decoration:none;
  font-weight:600;font-size:.98rem;padding:8px 20px 8px 8px;border-radius:var(--r-pill);box-shadow:0 10px 30px #16172040}
.wa .dot{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#25D366;color:#06210f;font-size:1.15rem}

@media (max-width:640px){
  body{font-size:16px}
  section{padding:64px 0}
  .hero{padding-top:96px;border-radius:0 0 32px 32px}
  .hero{padding-bottom:36px}
  .hero-pic{margin-top:40px}
  .after-hero{padding-top:64px}
  .card{min-height:0;padding:24px}
  .bar{padding:6px 8px 6px 12px;gap:6px}
  .brand{font-size:1rem;gap:8px;white-space:nowrap}
  .brand .logo{width:34px;height:34px}
  .bar-end{gap:6px}
  .bar-end>.pill{display:none}
  .menu summary{padding:9px 13px;font-size:.9rem;white-space:nowrap}
  .wa span.t{display:none}
  .wa{padding:8px}
}