/* RukJao — marketing site */
:root{
  --w9:#1a0611;--w8:#2a0a1c;--w7:#3d0f27;--w6:#5b1a3a;--w5:#7a2550;--w4:#9b3566;
  --g6:#b8862a;--g5:#d4a03a;--g4:#e7bd62;--g2:#f5dfa8;--g1:#fbf1db;
  --cream:#faf5ee;--cream2:#f3eadf;--ink:#23151c;--ink2:#4a3942;--mut:#8a7680;--line:#eadfd3;
  --serif:'Fraunces',Georgia,serif;--sans:'Manrope','Mukta',system-ui,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
svg.ic{width:20px;height:20px;flex:none}
.f-wa svg.ic{width:18px;height:18px}
img{max-width:100%}
.wrap{width:min(1180px,100% - 32px);margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:14px;font:800 .95rem var(--sans);border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px}
.btn-gold{background:linear-gradient(135deg,#f0cd7a,var(--g5) 55%,var(--g6));color:var(--w9);box-shadow:0 10px 30px rgba(212,160,58,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-gold:hover{box-shadow:0 14px 36px rgba(212,160,58,.5)}
.btn-glass{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.13)}
.btn-wine{background:var(--w6);color:#fff}
.btn-wine:hover{background:var(--w5);box-shadow:0 10px 26px rgba(91,26,58,.3)}
.btn-line{border-color:var(--line);background:#fff;color:var(--w6)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--g6)}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
h1,h2,h3{margin:0;line-height:1.08}
.h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.025em;margin:.6rem 0 .8rem}
.h2 em{font-style:italic;color:var(--w5)}
.lead{font-size:1.08rem;color:var(--ink2);max-width:60ch}
section{position:relative}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s,padding .3s;padding:18px 0}
.nav.solid{background:rgba(42,10,28,.88);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.06);padding:10px 0}
.nav .wrap{display:flex;align-items:center;gap:1.4rem}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff}
.brand svg{border-radius:10px;box-shadow:0 0 0 1px rgba(231,189,98,.4)}
.brand b{font-family:var(--serif);font-size:1.45rem;font-weight:700;letter-spacing:-.01em}
.nav-links{display:none;gap:1.6rem;margin-left:auto;font-weight:700;font-size:.92rem;color:rgba(255,255,255,.78)}
.nav-links a:hover{color:var(--g4)}
.nav-cta{margin-left:auto;display:flex;gap:.6rem}
.nav-cta .btn{padding:.6rem 1rem;font-size:.86rem;border-radius:12px}
@media(min-width:960px){.nav-links{display:flex}.nav-cta{margin-left:1rem}}
@media(max-width:560px){.nav-cta .hide-s{display:none}}

/* hero */
.hero{background:radial-gradient(60% 55% at 78% 30%,rgba(231,189,98,.22),transparent 60%),radial-gradient(50% 60% at 0% 100%,rgba(155,53,102,.45),transparent 60%),linear-gradient(165deg,var(--w7) 0%,var(--w8) 45%,var(--w9) 100%);color:#fff;padding:130px 0 90px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .arches{position:absolute;right:-120px;top:60px;width:720px;height:720px;opacity:.13;pointer-events:none}
.hero-grid{display:grid;gap:3rem;align-items:center;position:relative}
@media(min-width:980px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.pill{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .9rem .4rem .45rem;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(231,189,98,.3);font-size:.84rem;font-weight:700;color:var(--g2)}
.pill i{font-style:normal;background:var(--g5);color:var(--w9);border-radius:99px;padding:.1rem .55rem;font-size:.72rem;font-weight:800}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.7rem,7vw,5.3rem);letter-spacing:-.035em;line-height:.98;margin:1.3rem 0 1.2rem}
.hero h1 em{font-style:italic;background:linear-gradient(120deg,#f8dc98,var(--g5) 60%,#f3c766);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.hero p.sub{font-size:1.14rem;color:rgba(255,255,255,.76);max-width:34rem;margin:0 0 1.8rem}
.hero .ctas{display:flex;flex-wrap:wrap;gap:.8rem}
.ticks{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.6rem;font-size:.9rem;color:rgba(255,255,255,.7);font-weight:600}
.ticks span::before{content:"✓";color:var(--g4);font-weight:900;margin-right:.4rem}

/* hero visual */
.stage{position:relative;height:540px;max-width:560px;margin:0 auto;width:100%}
.panel{position:absolute;left:0;right:46px;top:24px;border-radius:22px;background:linear-gradient(180deg,#fff,#fbf6ef);box-shadow:0 40px 90px rgba(10,2,6,.55),0 0 0 1px rgba(255,255,255,.08);color:var(--ink);overflow:hidden;transform:perspective(1400px) rotateY(-8deg) rotateX(3deg);transform-origin:left center}
.panel-top{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);background:#fff}
.panel-top i{width:10px;height:10px;border-radius:50%;background:#e9dccf}
.panel-top b{margin-left:.5rem;font-family:var(--serif);font-size:.98rem}
.panel-top small{margin-left:auto;font-size:.72rem;color:var(--mut);font-weight:700}
.panel-body{padding:1rem}
.mini-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-bottom:.8rem}
.mk{border:1px solid var(--line);border-radius:12px;padding:.55rem .65rem;background:#fff}
.mk small{display:block;font-size:.6rem;font-weight:800;letter-spacing:.06em;color:var(--mut);text-transform:uppercase}
.mk b{font-family:var(--serif);font-size:1.25rem}
.mk.dark{background:linear-gradient(140deg,var(--w6),var(--w8));border:0;color:#fff}.mk.dark small{color:rgba(255,255,255,.6)}
.mini-rooms{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem}
.mr{border-radius:10px;padding:.42rem .45rem;border:1px solid var(--line);position:relative;overflow:hidden;background:#fff;min-height:58px}
.mr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.mr b{font-family:var(--serif);font-size:.95rem;display:block;line-height:1}
.mr span{font-size:.58rem;font-weight:700;color:var(--c);display:block;margin-top:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr.v{--c:#1d8656}.mr.o{--c:#7a2550;background:#fbf2f6}.mr.a{--c:#bf7410}.mr.d{--c:#8a5a2b;background:repeating-linear-gradient(135deg,#fff,#fff 6px,#faf4ec 6px,#faf4ec 12px)}.mr.u{--c:#c2491a;background:#fff6f1}
.float{position:absolute;z-index:3;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 24px 60px rgba(10,2,6,.45);padding:.85rem 1rem;animation:bob 6s ease-in-out infinite}
.float small{display:block;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.float b{font-family:var(--serif);font-size:1.3rem}
.f-bill{right:0;bottom:70px;width:236px;animation-delay:-2s}
.f-bill .row{display:flex;justify-content:space-between;font-size:.76rem;padding:.18rem 0;color:var(--ink2)}
.f-bill .row.t{border-top:1px dashed var(--line);margin-top:.3rem;padding-top:.4rem;font-weight:800;color:var(--ink)}
.f-bill .ok{display:inline-flex;gap:.3rem;align-items:center;margin-top:.5rem;font-size:.72rem;font-weight:800;color:#1d8656;background:#e5f4ec;padding:.2rem .55rem;border-radius:99px}
.f-arr{left:-14px;bottom:18px;display:flex;gap:.7rem;align-items:center;animation-delay:-4s}
.f-arr .fi{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--g1);color:var(--g6)}
.f-wa{right:14px;top:-6px;display:flex;gap:.6rem;align-items:center;padding:.6rem .85rem;font-size:.8rem;font-weight:700;background:#e9fbe9;color:#145c2d}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:620px){.stage{height:470px}.panel{right:12px;transform:none}.mini-rooms{grid-template-columns:repeat(4,1fr)}.mini-rooms .mr:nth-child(n+13){display:none}.f-bill{width:200px;bottom:40px}.f-arr{left:0;bottom:-6px}}

/* strip */
.strip{background:var(--w9);color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.06);overflow:hidden;padding:18px 0}
.marq{display:flex;gap:3rem;white-space:nowrap;animation:mq 28s linear infinite;width:max-content;font-family:var(--serif);font-size:1.35rem;font-style:italic}
.marq span::after{content:"✦";margin-left:3rem;color:var(--g5);font-style:normal;font-size:.9rem;vertical-align:middle}
@keyframes mq{to{transform:translateX(-50%)}}

/* compare */
.sec{padding:96px 0}
.compare{display:grid;gap:1.2rem;margin-top:2.4rem}
@media(min-width:860px){.compare{grid-template-columns:1fr 1fr}}
.cmp{border-radius:24px;padding:1.8rem;border:1px solid var(--line);background:#fff}
.cmp h3{font-family:var(--serif);font-size:1.5rem;font-weight:600;margin-bottom:1rem}
.cmp ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.cmp li{display:flex;gap:.7rem;align-items:flex-start;font-weight:600;color:var(--ink2)}
.cmp li b{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:.85rem}
.cmp.old{background:repeating-linear-gradient(0deg,#fff,#fff 31px,#f1e7db 31px,#f1e7db 32px)}
.cmp.old li b{background:#fbe6e9;color:#c03148}
.cmp.new{background:linear-gradient(160deg,var(--w6),var(--w8));color:#fff;border:0;box-shadow:0 30px 60px rgba(61,15,39,.25)}
.cmp.new h3{color:#fff}.cmp.new li{color:rgba(255,255,255,.88)}
.cmp.new li b{background:rgba(231,189,98,.2);color:var(--g4)}

/* bento */
.bento{display:grid;gap:1rem;margin-top:2.6rem}
@media(min-width:760px){.bento{grid-template-columns:repeat(6,1fr)}.b-a{grid-column:span 4}.b-b{grid-column:span 2}.b-c,.b-d,.b-e{grid-column:span 2}.b-f{grid-column:span 3}.b-g{grid-column:span 3}}
.tile{border-radius:24px;padding:1.6rem;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.tile:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(61,15,39,.1)}
.tile .ti{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--g1);color:var(--g6);margin-bottom:1rem}
.tile .ti svg{width:24px;height:24px}
.tile h3{font-family:var(--serif);font-size:1.32rem;font-weight:600;margin-bottom:.4rem;letter-spacing:-.01em}
.tile p{margin:0;color:var(--ink2);font-size:.96rem}
.tile.dark{background:linear-gradient(150deg,var(--w7),var(--w9));color:#fff;border:0}
.tile.dark h3{color:#fff}.tile.dark p{color:rgba(255,255,255,.72)}.tile.dark .ti{background:rgba(231,189,98,.15);color:var(--g4)}
.tile.gold{background:linear-gradient(150deg,#fdf3dc,#f6e2b2);border-color:#efd9a6}
.demo-rooms{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;margin-top:1.2rem}
.demo-rooms .mr{min-height:50px;background:rgba(255,255,255,.96)}
.inv-mini{margin-top:1.1rem;border-radius:14px;background:#fff;border:1px solid var(--line);padding:.8rem .9rem;font-size:.8rem}
.inv-mini .r{display:flex;justify-content:space-between;padding:.15rem 0;color:var(--ink2)}
.inv-mini .r.t{border-top:2px solid var(--ink);margin-top:.35rem;padding-top:.4rem;font-weight:800;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.chips span{font-size:.76rem;font-weight:800;border-radius:99px;padding:.25rem .65rem;background:var(--cream2);color:var(--ink2)}
.tile.dark .chips span{background:rgba(255,255,255,.08);color:var(--g2)}

/* steps */
.steps{display:grid;gap:1.2rem;margin-top:2.6rem;counter-reset:s}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{padding:2rem 1.6rem 1.6rem;border-radius:200px 200px 24px 24px;background:#fff;border:1px solid var(--line);text-align:center}
.step .n{width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:1.7rem;font-weight:700;color:var(--w9);background:linear-gradient(135deg,var(--g4),var(--g6));box-shadow:0 10px 24px rgba(212,160,58,.35)}
.step h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin-bottom:.4rem}
.step p{color:var(--ink2);margin:0}

/* numbers */
.nums{background:linear-gradient(120deg,var(--w8),var(--w6));color:#fff;padding:64px 0}
.nums .wrap{display:grid;gap:1.6rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.nums .wrap{grid-template-columns:repeat(4,1fr)}}
.num b{display:block;font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.2rem);font-weight:600;color:var(--g4);letter-spacing:-.02em;line-height:1}
.num span{color:rgba(255,255,255,.72);font-weight:600;font-size:.95rem}

/* pricing */
.prices{display:grid;gap:1.2rem;margin-top:2.6rem}
@media(min-width:860px){.prices{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.price{border-radius:26px;padding:2rem 1.7rem;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.price h3{font-family:var(--serif);font-size:1.5rem;font-weight:600}
.price .amt{font-family:var(--serif);font-size:3rem;font-weight:700;letter-spacing:-.03em;margin:.8rem 0 0;line-height:1}
.price .amt small{font-family:var(--sans);font-size:1rem;color:var(--mut);font-weight:600;letter-spacing:0}
.price .yr{color:var(--mut);font-size:.88rem;margin-bottom:1.2rem}
.price ul{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.55rem;flex:1}
.price li{display:flex;gap:.55rem;font-weight:600;color:var(--ink2);font-size:.95rem}
.price li::before{content:"✓";color:var(--g6);font-weight:900}
.price.hot{background:linear-gradient(165deg,var(--w6),var(--w9));color:#fff;border:0;box-shadow:0 30px 70px rgba(61,15,39,.3);position:relative}
.price.hot h3,.price.hot .amt{color:#fff}.price.hot .yr,.price.hot .amt small{color:rgba(255,255,255,.6)}.price.hot li{color:rgba(255,255,255,.85)}.price.hot li::before{color:var(--g4)}
.price .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--g5);color:var(--w9);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .8rem;border-radius:99px}

/* who */
.who{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.who span{padding:.65rem 1.1rem;border-radius:14px;background:#fff;border:1px solid var(--line);font-weight:700;color:var(--ink2)}

/* faq */
.faq{max-width:820px;margin:2.2rem auto 0;display:grid;gap:.7rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.3rem}
.faq summary{cursor:pointer;font-weight:800;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--g6);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:.7rem 0 0;color:var(--ink2)}

/* cta */
.cta{background:radial-gradient(60% 80% at 80% 0%,rgba(231,189,98,.25),transparent 60%),linear-gradient(160deg,var(--w7),var(--w9));color:#fff;border-radius:34px;padding:3rem 1.6rem;display:grid;gap:2rem;overflow:hidden;position:relative}
@media(min-width:900px){.cta{grid-template-columns:1.1fr 1fr;padding:3.5rem}}
.cta h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:600;letter-spacing:-.02em}
.cta h2 em{color:var(--g4);font-style:italic}
.cta p{color:rgba(255,255,255,.75)}
.lead-form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:1.4rem;display:grid;gap:.7rem}
.lead-form input,.lead-form textarea{width:100%;padding:.8rem .95rem;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;font:600 .95rem var(--sans)}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:rgba(255,255,255,.5)}
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--g4)}
.lead-form .two{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.ok-msg{background:#e5f4ec;color:#145c3c;border-radius:12px;padding:.8rem 1rem;font-weight:700}
.hp{position:absolute;left:-9999px}

/* footer */
footer{padding:56px 0 36px;color:var(--ink2);font-size:.92rem}
footer .wrap{display:grid;gap:2rem}
@media(min-width:860px){footer .wrap{grid-template-columns:1.4fr 1fr 1fr}}
footer h4{margin:0 0 .7rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
footer a{display:block;padding:.2rem 0}
footer a:hover{color:var(--w5)}
footer .wrap.copy{display:flex}
.copy{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.2rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;color:var(--mut);font-size:.84rem}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.float,.marq{animation:none}}