/* NARIA AI — site styles.
   Ported from the v6 design: light, generous spacing, one violet accent.
   Layout is grid-first; every breakpoint collapses to a single column. */

:root{
  --ink:#12121A; --body:#5A5A6E; --mut:#8E8EA3; --line:#E9E7F1;
  --pp:#6B4EFF; --pp2:#9B7CFF; --mint:#63C9A8; --lav:#F2EFFF; --lime:#C8F24C;
  --dark:#0C0C11; --err:#C0392B;
  --font:"Sarabun","Noto Sans SC","Helvetica Neue",Arial,sans-serif;
  --wrap:1280px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:#fff;color:var(--ink);font-family:var(--font);font-size:15.5px;font-weight:300;
  line-height:1.75;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;}
button{font:inherit;cursor:pointer;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 44px;}
section{padding:104px 0;}
h1,h2,h3{font-weight:700;letter-spacing:-.015em;}
h2{font-size:clamp(26px,3.5vw,42px);line-height:1.28;}

.kick{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--pp);font-weight:600;
  display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.kick::before{content:"";width:28px;height:1.5px;background:var(--pp);}
.grad{background:linear-gradient(96deg,var(--pp) 0%,#5A9BE8 45%,var(--mint) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.sub{color:var(--body);max-width:58ch;}
.st{color:var(--pp);}

.pill{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border:1px solid var(--ink);
  border-radius:99px;padding:15px 30px;font-size:14.5px;font-weight:500;transition:background .2s,border-color .2s;}
.pill:hover{background:var(--pp);border-color:var(--pp);}
.pill.gh{background:#fff;color:var(--ink);border-color:var(--line);}
.pill.gh:hover{background:#fff;border-color:var(--ink);}

.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border-radius:99px;border:1px solid var(--line);}
:focus-visible{outline:2px solid var(--pp);outline-offset:3px;border-radius:4px;}

/* nav */
nav{position:sticky;top:0;z-index:80;background:#ffffffe0;backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:15px 44px;display:flex;align-items:center;justify-content:space-between;gap:22px;}
.brand{font-size:19px;letter-spacing:.34em;font-weight:400;white-space:nowrap;}
.brand i{font-style:normal;font-size:10.5px;letter-spacing:.2em;color:var(--mut);border-left:1px solid var(--line);padding-left:10px;margin-left:8px;}
.nav-c{display:flex;gap:30px;font-size:14px;color:var(--body);}
.nav-c a:hover{color:var(--pp);}
.nav-r{display:flex;align-items:center;gap:11px;}
.lang{display:flex;gap:4px;border:1px solid var(--line);border-radius:99px;padding:4px 6px;}
.lang-a{font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--body);padding:3px 9px;border-radius:99px;}
.lang-a:hover{color:var(--pp);background:var(--lav);}
.navcta{background:var(--ink);color:#fff;border-radius:99px;padding:10px 22px;font-size:13.5px;font-weight:500;white-space:nowrap;}
.navcta:hover{background:var(--pp);}
.navtoggle{display:none;width:40px;height:36px;border:1px solid var(--line);border-radius:10px;background:#fff;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;}
.navtoggle span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .2s;}
.navtoggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg);}
.navtoggle[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg);}
.nav-m{display:none;flex-direction:column;padding:8px 44px 20px;border-top:1px solid var(--line);background:#fff;}
.nav-m a{padding:12px 0;color:var(--body);border-bottom:1px solid var(--line);}
@media(max-width:1040px){
  .nav-c{display:none;}
  .navtoggle{display:flex;}
  .nav-m:not([hidden]){display:flex;}
  .nav-in,.nav-m{padding-left:22px;padding-right:22px;}
  .wrap{padding:0 22px;}
  section{padding:72px 0;}
}
@media(max-width:560px){.navcta{display:none;}}

/* hero */
.hero{position:relative;overflow:hidden;padding:88px 0 78px;
  background:linear-gradient(118deg,#FCFBFF 0%,#F2EEFF 40%,#EDF7F3 100%);}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(88px);opacity:.5;}
.hero::before{width:600px;height:500px;right:-100px;top:-150px;background:radial-gradient(circle,#BCA9FF,#CFEFD9 72%);}
.hero::after{width:480px;height:400px;right:220px;bottom:-160px;background:radial-gradient(circle,#A7E6DC,#EFE9FF 72%);}
.hero .wrap{position:relative;z-index:2;}
.hgrid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center;}
.hero h1{font-size:clamp(34px,5.2vw,62px);line-height:1.22;margin-bottom:26px;}
.hero .pos{font-size:clamp(16px,1.7vw,20px);font-weight:500;margin-bottom:38px;color:#2A2A38;}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap;}
.brandline{margin-top:44px;display:flex;align-items:center;gap:14px;font-size:11.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--mut);flex-wrap:wrap;}
.brandline b{color:var(--ink);font-weight:600;}
@media(max-width:940px){.hgrid{grid-template-columns:1fr;}}

/* engine */
.engine{display:flex;flex-direction:column;align-items:center;}
.orbit{width:100%;max-width:400px;aspect-ratio:1;}
.orbit svg{width:100%;height:100%;overflow:visible;}
.ring{fill:none;stroke:#D8D2F0;stroke-width:1;}
.ring.d{stroke-dasharray:3 8;stroke:#CFC8EA;}
.ring.out{stroke:#C9BEEC;stroke-dasharray:2 10;}
.olab{font-size:9px;letter-spacing:.28em;fill:#8B84AD;font-family:var(--font);font-weight:600;}
.olab.p{fill:var(--pp);}
.spin{transform-origin:50% 50%;animation:sp 52s linear infinite;}
.spin.r{animation-direction:reverse;animation-duration:76s;}
@keyframes sp{to{transform:rotate(360deg);}}
.pd{animation:pdd 3.4s ease-in-out infinite;}
@keyframes pdd{0%,100%{opacity:.3}50%{opacity:1}}
.star{filter:drop-shadow(0 0 20px #6B4EFF55);}
.idea-t{font-size:10px;letter-spacing:.3em;fill:var(--ink);font-weight:700;font-family:var(--font);}
.prog{margin-top:26px;width:100%;max-width:400px;}
.prog .t{display:flex;justify-content:space-between;gap:12px;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mut);margin-bottom:9px;}
.prog .bar{height:2px;background:#E4DFF6;position:relative;border-radius:2px;overflow:hidden;}
.prog .bar i{position:absolute;top:0;bottom:0;left:0;width:var(--pct,78%);
  background:linear-gradient(90deg,var(--pp),var(--mint));}

/* barrier */
.barrier{text-align:center;}
.barrier h2{margin-bottom:44px;}
.bwords{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:56px;}
.bw{border:1px solid var(--line);border-radius:99px;padding:11px 26px;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink);position:relative;background:#fff;
  transition:color .7s ease,border-color .7s ease,background .7s ease;}
.bw::after{content:"";position:absolute;left:14%;right:14%;top:50%;height:1.5px;background:var(--pp);
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.4,0,.2,1);}
.bw.gone{color:var(--mut);border-color:#EFEDF6;background:#FBFAFE;}
.bw.gone::after{transform:scaleX(1);}
.nowai{font-size:clamp(24px,3.4vw,38px);font-weight:700;letter-spacing:-.02em;}
.nowai .st{font-size:.7em;vertical-align:.18em;margin-left:10px;}

/* flow */
.flowband{background:linear-gradient(120deg,#FBFAFF,#F1F8F5);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.flowband .sub{margin-top:-4px;}
.fb{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:22px;align-items:center;margin-top:50px;}
.fnode{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 26px;text-align:center;}
.fnode.mid{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 20px 48px #6b4eff26;}
.fnode .lb{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--mut);margin-bottom:12px;}
.fnode.mid .lb{color:#9B95C4;}
.fnode h3{font-size:19px;font-weight:700;margin-bottom:8px;}
.fnode p{font-size:13px;color:var(--body);}
.fnode.mid p{color:#A9A4C9;}
.fnode .bigstar{font-size:26px;color:var(--pp2);display:block;margin-bottom:10px;}
.fsep{font-size:19px;color:var(--mut);text-align:center;}
@media(max-width:900px){.fb{grid-template-columns:1fr;}.fsep{transform:rotate(90deg);justify-self:center;}}

/* capabilities */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px;}
.cap{border:1px solid var(--line);border-radius:16px;padding:30px 26px;transition:transform .2s,border-color .2s;}
.cap:hover{border-color:var(--pp2);transform:translateY(-4px);}
.cap .ic{width:40px;height:40px;border-radius:11px;background:var(--lav);color:var(--pp);
  display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:18px;}
.cap h3{font-size:14.5px;letter-spacing:.04em;font-weight:700;margin-bottom:10px;}
.cap p{font-size:13.5px;color:var(--body);}
@media(max-width:900px){.caps{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.caps{grid-template-columns:1fr;}}

/* works */
#works{background:linear-gradient(180deg,#FAFAFE,#fff);border-top:1px solid var(--line);}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 32px;}
.tab{border:1px solid var(--line);border-radius:99px;padding:8px 20px;font-size:13px;color:var(--body);background:#fff;}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500;}
.wgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.wc{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4.1;padding:22px;
  display:flex;flex-direction:column;color:#fff;transition:transform .25s,opacity .25s;
  background-size:cover;background-position:center;}
.wc:hover{transform:translateY(-6px);}
.wc[hidden]{display:none;}
.wc .no{font-size:21px;font-weight:700;}
.wc h3{font-size:15.5px;font-weight:700;margin-top:auto;}
.wc small{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.72;}
.wc .go{position:absolute;right:16px;bottom:16px;width:32px;height:32px;border-radius:50%;
  background:#ffffff26;border:1px solid #ffffff40;display:flex;align-items:center;justify-content:center;font-size:13px;}
/* Tones stand in until real stills are dropped in as background images. */
.tone-dark{background-color:#1b1b28;background-image:linear-gradient(200deg,#2b2b3d,#0f0f18);}
.tone-light{color:var(--ink);background-image:linear-gradient(200deg,#e0e6ef,#c3cede);}
.tone-violet{background-image:linear-gradient(200deg,#5a3fd6,#241a5e);}
.tone-sand{color:var(--ink);background-image:linear-gradient(200deg,#e6e3dd,#cbc7bf);}
.tone-plum{background-image:linear-gradient(200deg,#3a2b46,#141018);}
.tone-light .go,.tone-sand .go{background:#00000012;border-color:#00000020;}
@media(max-width:1000px){.wgrid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.wgrid{grid-template-columns:repeat(2,1fr);}}

/* pricing */
#pricing{border-top:1px solid var(--line);}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;}
.pl{border:1px solid var(--line);border-radius:18px;padding:36px 30px;display:flex;flex-direction:column;position:relative;background:#fff;}
.pl.best{border-color:#C9BCFF;background:linear-gradient(180deg,#FBFAFF,#F3F0FF);box-shadow:0 18px 50px #6b4eff14;}
.badge{position:absolute;top:-13px;right:24px;background:var(--lime);color:#20301A;border-radius:99px;padding:5px 16px;font-size:11.5px;font-weight:700;}
.pl h3{font-size:17px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px;}
.pl .for{font-size:13px;color:var(--mut);margin-bottom:22px;}
.pl .amt{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1;}
.pl .amt small{font-size:12.5px;font-weight:400;color:var(--mut);margin-left:6px;}
.pl ul{list-style:none;margin:24px 0 0;flex:1;}
.pl li{font-size:13.5px;color:var(--body);padding-left:24px;position:relative;margin-bottom:12px;line-height:1.6;}
.pl li::before{content:"✓";position:absolute;left:0;color:#4CAF62;font-weight:700;}
.pl .foot{border-top:1px solid var(--line);margin-top:22px;padding-top:15px;font-size:12.5px;color:var(--mut);}
.fine{margin-top:26px;color:var(--mut);font-size:12px;line-height:1.9;}
.fine b{color:var(--ink);}
@media(max-width:960px){.plans{grid-template-columns:1fr;}}

/* free still + lead form */
#claim{background:linear-gradient(180deg,#fff,#FAFAFE);border-top:1px solid var(--line);}
.claim{display:grid;grid-template-columns:1fr 1.08fr;gap:52px;align-items:start;}
.cg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:sticky;top:96px;}
.cg div{aspect-ratio:3/4;border-radius:12px;background:linear-gradient(160deg,#EDE9FF,#DCE9F5);}
.cbox{background:var(--lav);border-radius:18px;padding:28px;margin-top:24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.cbox p{flex:1;min-width:200px;font-size:13.5px;color:var(--body);}
@media(max-width:900px){.claim{grid-template-columns:1fr;}.cg{position:static;}}

.lead{margin-top:34px;border:1px solid var(--line);border-radius:18px;padding:30px;background:#fff;}
.lead h3{font-size:16px;margin-bottom:20px;}
.frow{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.frow label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:600;}
.lead input,.lead select,.lead textarea{font:inherit;font-size:14.5px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;}
.lead input:focus,.lead select:focus,.lead textarea:focus{border-color:var(--pp);outline:none;}
.lead [aria-invalid="true"]{border-color:var(--err);}
.lead textarea{resize:vertical;min-height:84px;}
.fact{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;}
.fact small{font-size:12px;color:var(--mut);flex:1;min-width:180px;}
.formmsg{display:none;font-size:13.5px;border-radius:12px;padding:12px 14px;margin-bottom:18px;}
.formmsg.err{display:block;background:#FDF0EE;color:var(--err);border:1px solid #F3D5D0;}
.formmsg.ok{display:block;background:#EDF9F3;color:#1E7A54;border:1px solid #CDE9DC;}
/* Honeypot: off-screen but not display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* human line */
.humanwrap{padding-top:0;}
.human{background:var(--lav);border-radius:22px;padding:52px 44px;text-align:center;}
.human p{font-size:clamp(19px,2.3vw,26px);font-weight:500;line-height:1.55;max-width:30ch;margin:0 auto;}
.human footer{margin-top:18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);}

/* closing */
.close{background:var(--dark);color:#fff;position:relative;overflow:hidden;}
.close::after{content:"";position:absolute;right:-80px;bottom:-120px;width:520px;height:400px;
  background:radial-gradient(circle,#6b4eff4d,transparent 66%);filter:blur(44px);}
.close-in{padding:96px 0;position:relative;z-index:2;text-align:center;}
.close h2{font-size:clamp(28px,4.2vw,50px);line-height:1.22;margin-bottom:26px;}
.close .do{font-size:clamp(22px,2.8vw,32px);font-weight:700;margin-bottom:38px;}
.close .do .st{color:var(--pp2);}
.close .pill{background:#fff;color:var(--ink);border-color:#fff;}
.close .pill:hover{background:var(--lime);border-color:var(--lime);}
.close .sig{margin-top:52px;font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:#8A85A8;}
.close .sig b{color:#fff;font-weight:600;}

/* standalone message page */
.msg{padding:140px 0 120px;background:linear-gradient(118deg,#FCFBFF,#F2EEFF 60%,#EDF7F3);}
.msg h1{font-size:clamp(30px,4.4vw,48px);line-height:1.24;margin-bottom:18px;}
.msg .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}

/* footer */
footer{padding:66px 0 38px;border-top:1px solid var(--line);}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
.fabout .brand{display:inline-block;margin-bottom:14px;}
.fabout p{font-size:13.5px;color:var(--body);max-width:34ch;}
.fh{font-size:13.5px;font-weight:700;margin-bottom:15px;}
footer li{list-style:none;font-size:13.5px;color:var(--body);margin-bottom:9px;}
footer li a:hover{color:var(--pp);}
.fbot{border-top:1px solid var(--line);margin-top:46px;padding-top:22px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:12px;color:var(--mut);}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr;}}

.float{position:fixed;right:26px;bottom:26px;z-index:90;background:var(--ink);color:#fff;
  padding:14px 26px;border-radius:99px;font-size:13.5px;font-weight:500;box-shadow:0 10px 30px #00000026;}
.float:hover{background:var(--pp);}
@media(max-width:560px){.float{right:14px;bottom:14px;padding:12px 20px;font-size:13px;}}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
}