/* ommsaionline.com — Pramod Kumar Nayak
   Hand-written CSS. No framework, no build step, no dependency. */

/* ===== tokens ===== */
:root{
  --bg:#070A09;
  --bg-2:#0C1211;
  --surface:#111A18;
  --surface-2:#16211F;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --ink:#F3F7F6;
  --ink-2:#A9BAB6;
  --muted:#6F817E;

  --gold:#F0B429;
  --gold-2:#F7D98A;
  --gold-d:#8A6410;
  --teal:#2DD4BF;
  --teal-d:#0D5C54;

  --l-bg:#FAFAF8;
  --l-surface:#fff;
  --l-ink:#0B1110;
  --l-ink-2:#44514E;
  --l-muted:#6B7A77;
  --l-line:#E3E8E6;

  --r:14px;
  --max:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-family:Sora,Inter,sans-serif;line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--gold);color:#140E00}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:22px}
@media(max-width:560px){.wrap{padding-inline:18px}}

/* ===== scroll progress ===== */
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .1s linear}

/* ===== header ===== */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s var(--ease),border-color .4s var(--ease)}
header.solid{background:rgba(7,10,9,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:26px;max-width:var(--max);margin:0 auto;padding:16px 22px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand img{width:34px;height:34px;object-fit:contain}
.brand b{font:700 16px/1 Sora,sans-serif;letter-spacing:-.03em}
.brand b i{font-style:normal;background:linear-gradient(92deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.nav .l{font-size:14px;color:var(--ink-2);font-weight:500;position:relative;padding:4px 0}
.nav .l::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease)}
.nav .l:hover{color:var(--ink)}
.nav .l:hover::after{width:100%}
.nav .cta{background:var(--gold);color:#120C00;padding:10px 18px;border-radius:99px;font-size:14px;font-weight:700;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.nav .cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px -10px var(--gold)}
@media(max-width:880px){.nav .l{display:none}.nav{gap:14px}}

/* ===== hero ===== */
.hero.short{min-height:auto;padding:126px 0 26px}
.hero{position:relative;min-height:92vh;display:flex;align-items:center;padding:132px 0 70px;overflow:hidden}
#flow{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 78% at 50% 0%,transparent 40%,var(--bg) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:38px}.hero{min-height:auto;padding:112px 0 56px}}

.tagpill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-2);border-radius:99px;
  padding:7px 15px;font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:.02em;margin-bottom:26px}
.tagpill i{width:6px;height:6px;border-radius:99px;background:var(--teal);animation:blip 2s infinite}
@keyframes blip{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(45,212,191,.5)}50%{opacity:.6;box-shadow:0 0 0 7px rgba(45,212,191,0)}}

.hero h1{font-size:clamp(38px,6.6vw,74px);font-weight:800}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln span{display:block;transform:translateY(105%);opacity:0;animation:rise .95s var(--ease) forwards}
.hero h1 .ln:nth-child(2) span{animation-delay:.1s}
.hero h1 .ln:nth-child(3) span{animation-delay:.2s}
@keyframes rise{to{transform:translateY(0);opacity:1}}
.grad{background:linear-gradient(97deg,var(--gold-2) 0%,var(--gold) 38%,var(--teal) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.hero .lede{margin-top:24px;font-size:clamp(16px,2vw,19px);color:var(--ink-2);max-width:54ch;
  opacity:0;animation:fadeup .9s var(--ease) .38s forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .btns{opacity:0;animation:fadeup .9s var(--ease) .5s forwards}

.btns{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:99px;font-weight:700;font-size:15px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);will-change:transform}
.btn-p{background:linear-gradient(100deg,var(--gold-2),var(--gold));color:#140E00}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 16px 38px -14px var(--gold)}
.btn-s{border:1px solid var(--line-2);color:var(--ink)}
.btn-s:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

/* portrait */
.shot{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  opacity:0;animation:fadeup 1.1s var(--ease) .3s forwards;transform-style:preserve-3d}
.shot img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.shot::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(7,10,9,.9) 100%)}
.shot::after{content:"";position:absolute;inset:-1px;z-index:1;pointer-events:none;border-radius:20px;
  background:linear-gradient(145deg,rgba(240,180,41,.5),transparent 42%,transparent 62%,rgba(45,212,191,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.shot .cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:3}
.shot .cap b{display:block;font:700 17px/1.2 Sora,sans-serif;letter-spacing:-.02em}
.shot .cap span{display:block;margin-top:5px;font-size:12.5px;color:var(--gold)}

/* ===== marquee ===== */
.mq{border-block:1px solid var(--line);background:var(--bg-2);padding:17px 0;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-in{display:flex;gap:44px;width:max-content;animation:slide 34s linear infinite}
.mq:hover .mq-in{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.mq span{font:600 14px/1 Sora,sans-serif;color:var(--muted);letter-spacing:.03em;white-space:nowrap;
  display:flex;align-items:center;gap:44px}
.mq span::after{content:"";width:5px;height:5px;border-radius:99px;background:var(--gold);opacity:.55}

/* ===== sections ===== */
section{padding:96px 0;position:relative}
@media(max-width:640px){section{padding:68px 0}}
section.light{background:var(--l-bg);color:var(--l-ink)}
section.light h1,section.light h2,section.light h3{color:var(--l-ink)}
section.light p{color:var(--l-ink-2)}

.shead{max-width:60ch;margin-bottom:46px}
.shead .k{display:inline-block;font:700 11.5px/1 Sora,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px}
section.light .shead .k{color:var(--gold-d)}
.shead h2{font-size:clamp(27px,4.2vw,45px);font-weight:800}
.shead p{margin-top:18px;font-size:17.5px;color:var(--ink-2)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.4s}

/* ===== stats ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--bg);padding:30px 24px}
section.light .stat{background:var(--l-surface)}
.stat b{display:block;font:800 clamp(30px,4.4vw,42px)/1 Sora,sans-serif;letter-spacing:-.04em}
.stat .u{color:var(--gold);font-size:.62em}
.stat>span{display:block;margin-top:9px;color:var(--muted);font-size:13.5px;line-height:1.45}
section.light .stat>span{color:var(--l-muted)}
section.light .stats{background:var(--l-line);border-color:var(--l-line)}

/* ===== tilt cards ===== */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.tilt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px;
  position:relative;overflow:hidden;transition:border-color .35s var(--ease),transform .12s linear;
  transform-style:preserve-3d;will-change:transform}
section.light .tilt{background:var(--l-surface);border-color:var(--l-line)}
.tilt::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(240,180,41,.16),transparent 66%);
  left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);opacity:0;transition:opacity .35s}
.tilt:hover::before{opacity:1}
.tilt:hover{border-color:var(--line-2)}
section.light .tilt:hover{border-color:#C9D3D0}
.tilt>*{position:relative;z-index:1}
.tilt .ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(140deg,rgba(240,180,41,.2),rgba(45,212,191,.12));border:1px solid var(--line)}
.tilt .ico svg{width:21px;height:21px;stroke:var(--gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tilt .tag{display:inline-block;font:700 10.5px/1 Sora,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);margin-bottom:11px}
.tilt.hot .tag{color:var(--gold)}
.tilt h3{font-size:19px;font-weight:700;margin-bottom:10px}
.tilt p{font-size:15px;color:var(--ink-2)}
section.light .tilt p{color:var(--l-ink-2)}
.tilt .go{display:inline-flex;align-items:center;gap:7px;margin-top:17px;font-size:14px;font-weight:700;color:var(--gold)}
.tilt .go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.tilt:hover .go svg{transform:translateX(4px)}

/* ===== whatsapp demo ===== */
.demo{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center}
@media(max-width:900px){.demo{grid-template-columns:1fr;gap:34px}}
.phone{width:100%;max-width:330px;margin:0 auto;background:#0A1211;border:9px solid #1C2624;border-radius:38px;
  padding:0;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.05)}
.ph-top{background:#0F2F2A;padding:13px 16px;display:flex;align-items:center;gap:11px}
.ph-top .av{width:33px;height:33px;border-radius:99px;background:linear-gradient(135deg,var(--gold),var(--teal));
  display:grid;place-items:center;font:800 13px/1 Sora,sans-serif;color:#0A1211}
.ph-top b{font:600 14px/1.2 Inter,sans-serif;display:block}
.ph-top span{font-size:11px;color:var(--teal)}
.ph-body{height:352px;padding:16px 14px;display:flex;flex-direction:column;gap:9px;overflow:hidden;
  background:
    radial-gradient(circle at 20% 15%,rgba(45,212,191,.05),transparent 42%),
    radial-gradient(circle at 80% 70%,rgba(240,180,41,.05),transparent 42%),#0A1211}
.bub{max-width:80%;padding:9px 13px;border-radius:13px;font-size:13.5px;line-height:1.5;
  opacity:0;transform:translateY(9px) scale(.97);animation:pop .4s var(--ease) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.bub.them{background:#18221F;border-top-left-radius:4px;align-self:flex-start;color:#DCE8E5}
.bub.me{background:#0F5148;border-top-right-radius:4px;align-self:flex-end;color:#EAF7F4}
.bub.me::after{content:"✓✓";display:block;text-align:right;font-size:10px;color:var(--teal);margin-top:3px}
.bub.typing{display:flex;gap:4px;padding:13px}
.bub.typing i{width:6px;height:6px;border-radius:99px;background:#6C807C;animation:dot 1.3s infinite}
.bub.typing i:nth-child(2){animation-delay:.18s}
.bub.typing i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.ph-tag{text-align:center;margin-top:16px;font-size:12.5px;color:var(--muted)}

/* ===== big feature ===== */
.slab{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(150deg,#0E1918 0%,#0A100F 55%,#131A13 100%);padding:56px}
@media(max-width:620px){.slab{padding:34px 26px}}
.slab .mesh{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(52% 46% at 12% 8%,rgba(240,180,41,.24),transparent 62%),
    radial-gradient(48% 44% at 88% 92%,rgba(45,212,191,.22),transparent 62%);
  animation:drift 17s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(-22px,16px,0) scale(1.08)}}
.slab>*{position:relative;z-index:1}
.slab h2{font-size:clamp(25px,3.9vw,40px);font-weight:800;max-width:19ch}
.slab p{margin-top:20px;color:var(--ink-2);font-size:17.5px;max-width:56ch}
.feats{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.feats li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink-2)}
.feats li svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== faq ===== */
.faq{border-top:1px solid var(--line)}
section.light .faq{border-color:var(--l-line)}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
section.light .faq details{border-color:var(--l-line)}
.faq summary{font:700 17.5px/1.4 Sora,sans-serif;cursor:pointer;list-style:none;display:flex;gap:16px;align-items:flex-start;
  letter-spacing:-.02em;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary i{flex:none;width:20px;height:20px;position:relative;margin-top:3px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;background:var(--gold);
  left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .32s var(--ease)}
.faq summary i::before{width:14px;height:2px}
.faq summary i::after{width:2px;height:14px}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq p{margin-top:13px;padding-left:36px;color:var(--ink-2);font-size:16.5px}
section.light .faq p{color:var(--l-ink-2)}

/* ===== prose ===== */
.prose{max-width:72ch}
.prose h2{font-size:clamp(23px,3.2vw,31px);font-weight:800;margin:52px 0 16px}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:17px;font-size:17.5px;color:var(--ink-2)}
.prose ul{margin:0 0 20px;padding-left:24px;font-size:17.5px;color:var(--ink-2)}
.prose li{margin-bottom:10px}
.prose strong{color:var(--ink);font-weight:600}
section.light .prose strong{color:var(--l-ink)}
.prose .lead{font-size:21px;color:var(--ink);font-weight:500}
section.light .prose .lead{color:var(--l-ink)}

/* ===== link list ===== */
.links{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));list-style:none;padding:0;margin:0}
.links a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:15px 17px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);font-size:15px;font-weight:600;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.links a:hover{border-color:var(--gold);transform:translateX(4px)}
section.light .links a{background:var(--l-surface);border-color:var(--l-line)}
.links em{font-style:normal;color:var(--muted);font-size:13px;font-weight:500}

/* ===== footer ===== */
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:64px 0 34px;font-size:14.5px;color:var(--ink-2)}
footer h4{color:var(--ink);font:700 12px/1 Sora,sans-serif;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}
footer .fgrid{display:grid;gap:40px;grid-template-columns:1.5fr 1fr 1fr}
@media(max-width:780px){footer .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){footer .fgrid{grid-template-columns:1fr}}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
footer a{transition:color .25s}
footer a:hover{color:var(--gold)}
footer .logos{display:flex;gap:16px;align-items:center;margin-bottom:20px}
footer .logos img{height:40px;width:auto;object-fit:contain}
.built{margin-top:46px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;font-size:13.5px;color:var(--muted)}
.built b{color:var(--ink);font-weight:600}
.built .by{display:inline-flex;align-items:center;gap:8px}
.built .by i{width:5px;height:5px;border-radius:99px;background:var(--gold);display:inline-block}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .hero h1 .ln span{transform:none;opacity:1}
  .hero .lede,.hero .btns,.shot{opacity:1}
  #flow{display:none}
}