/* hruniq.app website. Pine and leaf greens from the app, one warm accent
   (marigold) used only for "in progress" moments, Bricolage Grotesque for
   headings and Plus Jakarta Sans (the app's own face) for text. */
:root{
  --pine:#0F3D2E; --pine-2:#174C3A; --leaf:#1F8A5F; --leaf-2:#2FA876; --mist:#EAF1EC; --mist-2:#F5F8F6;
  --ink:#16233A; --slate:#55607A; --line:#DCE5DF; --white:#FFFFFF; --marigold:#F0A92E; --marigold-bg:#FFF4DC;
  --display:"Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --text:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--text);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--leaf);}
:focus-visible{outline:3px solid var(--leaf-2);outline-offset:2px;border-radius:6px;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}
h1,h2,h3{font-family:var(--display);color:var(--pine);margin:0;letter-spacing:-.02em;}
h1{font-size:clamp(40px,5.6vw,68px);line-height:1.02;font-weight:800;}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.08;font-weight:750;}
h3{font-size:21px;line-height:1.25;font-weight:700;}
p{margin:0 0 14px;}
.lead{font-size:19px;color:var(--slate);max-width:60ch;}
.muted{color:var(--slate);}
.small{font-size:14px;color:var(--slate);}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:13px 24px;font:700 15.5px var(--text);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.btn-go{background:var(--leaf);color:#fff;}
.btn-go:hover{background:var(--pine-2);}
.btn-line{border-color:var(--pine);color:var(--pine);background:transparent;}
.btn-line:hover{background:var(--pine);color:#fff;}
.btn-light{background:#fff;color:var(--pine);}
.btn-light:hover{background:var(--mist);}

/* Header */
.top{position:sticky;top:0;z-index:50;padding:14px 0;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s;}
.top.scrolled{border-bottom-color:var(--line);}
.top .wrap{display:flex;align-items:center;gap:26px;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--pine);font:800 21px var(--display);letter-spacing:-.02em;}
.logo img{width:34px;height:34px;border-radius:9px;}
.logo span{font-weight:600;color:var(--leaf);}
.menu{display:flex;align-items:center;gap:4px;flex:1;}
.menu > a,.menu > .dd > button{font:600 15px var(--text);color:var(--ink);text-decoration:none;padding:9px 13px;border-radius:10px;background:none;border:0;cursor:pointer;}
.menu > a:hover,.menu > .dd > button:hover,.menu > a[aria-current]{background:var(--mist);color:var(--pine);}
.dd{position:relative;}
.dd-panel{position:absolute;top:calc(100% + 10px);left:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(15,61,46,.14);padding:10px;min-width:250px;display:none;}
.dd.open .dd-panel{display:block;}
.dd-panel a{display:flex;flex-direction:column;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink);}
.dd-panel a:hover{background:var(--mist-2);}
.dd-panel a b{font-size:14.5px;color:var(--pine);}
.dd-panel a span{font-size:13px;color:var(--slate);line-height:1.4;}
.dd-products .dd-panel{display:none;grid-template-columns:1fr 1fr;width:560px;gap:2px;}
.dd-products.open .dd-panel{display:grid;}
.right{display:flex;align-items:center;gap:10px;}
.signin{display:flex;border:2px solid var(--pine);border-radius:999px;overflow:visible;position:relative;}
.signin > a{padding:9px 16px;font:700 15px var(--text);color:var(--pine);text-decoration:none;border-radius:999px 0 0 999px;}
.signin > button{border:0;border-left:2px solid var(--pine);background:none;padding:0 12px;cursor:pointer;color:var(--pine);border-radius:0 999px 999px 0;}
.signin > a:hover,.signin > button:hover{background:var(--mist);}
.signin .dd-panel{left:auto;right:0;min-width:210px;}
.signin .dd-panel a{flex-direction:row;align-items:center;gap:10px;font-weight:600;font-size:15px;}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;color:var(--pine);}

/* Hero */
.hero{padding:64px 0 40px;}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero h1{margin-bottom:22px;}
.hero .lead{margin-bottom:28px;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.cta-note{font-size:14px;color:var(--slate);margin-top:14px;}

/* "A day at the company" timeline — the one animated moment */
.day{background:var(--pine);color:#E6F1EB;border-radius:28px;padding:28px 28px 22px;position:relative;overflow:hidden;}
.day::after{content:"";position:absolute;inset:auto -80px -120px auto;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(47,168,118,.35),transparent 70%);pointer-events:none;}
.day h2{font-size:20px;color:#fff;letter-spacing:-.01em;margin-bottom:4px;}
.day .sub{font-size:13.5px;color:#9FC2B2;margin-bottom:18px;}
.day ol{list-style:none;margin:0;padding:0;position:relative;}
.day ol::before{content:"";position:absolute;left:56px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.12);}
.day li{display:grid;grid-template-columns:48px 18px 1fr;gap:10px;align-items:start;padding:9px 0;}
.day time{font:700 14px var(--text);color:#fff;font-variant-numeric:tabular-nums;padding-top:1px;}
.day .dot{width:12px;height:12px;border-radius:50%;background:var(--leaf-2);margin:5px 0 0 3px;box-shadow:0 0 0 4px var(--pine);position:relative;z-index:1;}
.day .dot.wait{background:var(--marigold);}
.day .ev b{display:block;color:#fff;font-size:15px;font-weight:700;line-height:1.35;}
.day .ev span{font-size:13.5px;color:#A9C9BA;line-height:1.45;}
.day .ev .tag{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:700;color:var(--pine);background:#BFE6D2;border-radius:6px;padding:1px 7px;}
.day .ev .tag.wait{background:var(--marigold);}
@media (prefers-reduced-motion:no-preference){
  .day li{opacity:0;transform:translateY(8px);animation:dayIn .5s ease forwards;}
  .day li:nth-child(1){animation-delay:.25s}.day li:nth-child(2){animation-delay:.75s}.day li:nth-child(3){animation-delay:1.25s}
  .day li:nth-child(4){animation-delay:1.75s}.day li:nth-child(5){animation-delay:2.25s}.day li:nth-child(6){animation-delay:2.75s}
}
@keyframes dayIn{to{opacity:1;transform:none;}}

/* Screens */
.frame{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px rgba(15,61,46,.16);}
.frame .bar{height:34px;background:var(--mist-2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 14px;}
.frame .bar i{width:10px;height:10px;border-radius:50%;background:#CBD6CF;}
.frame .bar em{margin-left:12px;font-style:normal;font-size:12.5px;color:var(--slate);background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 10px;}
.shot{padding:30px 0 80px;}
.shot .frame{max-width:1120px;margin:0 auto;}

/* Sections */
.sec{padding:90px 0;}
.sec.mist{background:var(--mist);}
.sec.pine{background:var(--pine);color:#D8E8E0;}
.sec.pine h2,.sec.pine h3{color:#fff;}
.sec-head{max-width:720px;margin-bottom:44px;}
.sec-head h2{margin-bottom:14px;}

/* Module index: a list, not cards */
.mods{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;}
.mods-intro p{color:var(--slate);}
.tiers{display:flex;gap:8px;margin:20px 0 6px;flex-wrap:wrap;}
.tiers span{border:1.5px solid var(--leaf);color:var(--pine);border-radius:999px;padding:4px 12px;font-size:13.5px;font-weight:700;}
.mod-list{border-top:2px solid var(--pine);}
.mod-row{display:grid;grid-template-columns:200px 1fr auto;gap:20px;align-items:baseline;padding:18px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);}
.mod-row:hover{background:var(--mist-2);}
.mod-row b{font:700 19px var(--display);color:var(--pine);}
.mod-row span{color:var(--slate);font-size:15px;}
.mod-row em{font-style:normal;font-weight:700;color:var(--leaf);font-size:14px;white-space:nowrap;}
.mod-row.base b::after{content:"Core";margin-left:8px;font:700 11px var(--text);color:#fff;background:var(--leaf);border-radius:6px;padding:2px 7px;vertical-align:3px;}

/* Feature spotlights */
.spot{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center;padding:56px 0;}
.spot + .spot{border-top:1px solid var(--line);}
.spot.flip .spot-text{order:2;}
.spot h3{font-size:30px;line-height:1.12;margin-bottom:14px;}
.spot ul{padding:0;margin:18px 0 0;list-style:none;}
.spot li{padding:8px 0 8px 30px;position:relative;color:var(--ink);}
.spot li::before{content:"";position:absolute;left:4px;top:15px;width:14px;height:8px;border-left:2.5px solid var(--leaf);border-bottom:2.5px solid var(--leaf);transform:rotate(-45deg);}
.spot .frame{box-shadow:0 20px 50px rgba(15,61,46,.12);}

/* Sequence (real steps only) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:s;}
.step{border-top:3px solid var(--leaf-2);padding-top:16px;}
.step::before{counter-increment:s;content:counter(s);font:800 34px var(--display);color:var(--leaf-2);display:block;margin-bottom:6px;}
.step h3{color:#fff;font-size:19px;margin-bottom:8px;}
.step p{font-size:15px;color:#B9D3C6;}

/* Phone */
.phone-sec{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;}
.phone{width:290px;margin:0 auto;border-radius:42px;border:10px solid var(--pine);overflow:hidden;box-shadow:0 30px 60px rgba(15,61,46,.25);background:#fff;}

/* Closing call to action */
.close{background:var(--leaf);color:#fff;border-radius:32px;padding:56px;display:grid;grid-template-columns:1.4fr auto;gap:30px;align-items:center;}
.close h2{color:#fff;margin-bottom:10px;}
.close p{color:#DDF3E8;margin:0;}

/* Product pages */
.p-hero{padding:56px 0 30px;}
.p-hero .wrap{max-width:900px;}
.crumb{font-size:14px;margin-bottom:16px;}
.crumb a{color:var(--slate);text-decoration:none;}
.crumb a:hover{color:var(--leaf);}
.price-line{display:inline-flex;gap:8px;align-items:baseline;background:var(--mist);border-radius:12px;padding:8px 14px;margin-top:6px;font-size:15px;}
.price-line b{font:800 20px var(--display);color:var(--pine);}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 40px;}
.feat h3{font-size:19px;margin-bottom:8px;}
.feat p{color:var(--slate);font-size:15.5px;}
.with{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.with a{border:1.5px solid var(--line);border-radius:999px;padding:7px 15px;text-decoration:none;color:var(--pine);font-weight:700;font-size:14.5px;background:#fff;}
.with a:hover{border-color:var(--leaf);}

/* Tier table */
.tier-table{width:100%;border-collapse:collapse;}
.tier-table th,.tier-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.tier-table thead th{font:700 19px var(--display);color:var(--pine);border-bottom:2px solid var(--pine);}
.tier-table thead th small{display:block;font:600 14px var(--text);color:var(--leaf);margin-top:3px;}
.tier-table td:first-child{font-weight:600;}
.tier-table .y{color:var(--leaf);font-weight:800;}
.tier-table .n{color:#B4BDB7;}

/* Pricing calculator */
.calc{display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:start;}
.pick h3{font-size:18px;margin:26px 0 10px;}
.pick h3:first-child{margin-top:0;}
.opt{display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:start;width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:14px 16px;margin-bottom:8px;cursor:pointer;font:inherit;color:inherit;}
.opt:hover{border-color:#B9CCC1;}
.opt[aria-pressed="true"]{border-color:var(--leaf);background:var(--mist-2);}
.opt .tick{width:22px;height:22px;border-radius:6px;border:2px solid #C3D0C8;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;margin-top:2px;}
.opt.radio .tick{border-radius:50%;}
.opt[aria-pressed="true"] .tick{background:var(--leaf);border-color:var(--leaf);}
.opt b{display:block;font-size:16px;color:var(--pine);}
.opt span{font-size:14px;color:var(--slate);line-height:1.45;display:block;}
.opt .pr{font:800 17px var(--display);color:var(--pine);white-space:nowrap;}
.opt .pr small{font:600 12px var(--text);color:var(--slate);}
.total{position:sticky;top:96px;background:var(--pine);color:#D8E8E0;border-radius:24px;padding:28px;}
.total label{font-weight:700;color:#fff;font-size:15px;display:block;margin-bottom:8px;}
.headcount{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.headcount input[type=range]{flex:1;accent-color:var(--leaf-2);}
.headcount input[type=number]{width:84px;border-radius:10px;border:0;padding:8px 10px;font:700 16px var(--text);}
.total .sum{font:800 46px var(--display);color:#fff;line-height:1;margin:6px 0 4px;}
.total .per{font-size:14px;color:#A9C9BA;margin-bottom:20px;}
.total ul{list-style:none;padding:0;margin:0 0 22px;font-size:14px;}
.total li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.total .btn{width:100%;}

/* FAQ */
.faq{max-width:820px;}
.faq details{border-bottom:1px solid var(--line);padding:18px 0;}
.faq summary{font:700 18px var(--display);color:var(--pine);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;}
.faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--leaf);}
.faq details[open] summary::after{content:"–";}
.faq p{margin:10px 0 0;color:var(--slate);}

/* Two-column text blocks (solutions, partners) */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.cols h3{margin-bottom:10px;}
.cols p{color:var(--slate);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}

/* Forms */
.form{display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px;color:var(--ink);}
.form input,.form select,.form textarea{font:500 15.5px var(--text);color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff;}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px var(--mist);}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-msg{border-radius:12px;padding:12px 14px;font-weight:600;font-size:14.5px;}
.form-msg.ok{background:var(--mist);color:var(--pine);}
.form-msg.err{background:#FDE7E4;color:#A1281B;}

/* Legal */
.legal{max-width:760px;}
.legal h2{font-size:24px;margin:34px 0 10px;}
.legal p,.legal li{color:#33405A;}

/* Footer */
.foot{background:var(--pine);color:#A9C9BA;padding:64px 0 36px;margin-top:90px;font-size:14.5px;}
.foot .wrap{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px;}
.foot .logo{color:#fff;}
.foot .logo span{color:#7FD3AB;}
.foot h4{color:#fff;font:700 15px var(--text);margin:4px 0 12px;}
.foot a{display:block;color:#A9C9BA;text-decoration:none;padding:3px 0;}
.foot a:hover{color:#fff;}
.foot .legal-line{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;margin-top:10px;font-size:13px;}

/* Mobile */
@media (max-width:980px){
  .menu,.right .signin,.right .btn-go{display:none;}
  .burger{display:block;}
  .top.menu-open .menu{display:flex;position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;background:#fff;padding:14px 20px 22px;border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(15,61,46,.12);max-height:calc(100vh - 68px);overflow:auto;}
  .top.menu-open .menu > a,.top.menu-open .menu .dd > button{font-size:17px;padding:12px;text-align:left;width:100%;}
  .top.menu-open .dd-panel{position:static;box-shadow:none;border:0;display:none;padding:0 0 0 10px;width:auto;}
  .top.menu-open .dd.open .dd-panel{display:block;}
  .top.menu-open .menu .m-only{display:flex;}
  .hero .wrap,.mods,.spot,.phone-sec,.calc,.split{grid-template-columns:1fr;gap:36px;}
  .spot.flip .spot-text{order:0;}
  .steps,.feat,.cols{grid-template-columns:1fr 1fr;}
  .foot .wrap{grid-template-columns:1fr 1fr;}
  .close{grid-template-columns:1fr;padding:36px;}
  .total{position:static;}
}
.m-only{display:none;}
@media (max-width:620px){
  body{font-size:16px;}
  .wrap{padding:0 16px;}
  .hero{padding:32px 0 20px;}
  .sec{padding:64px 0;}
  .steps,.feat,.cols{grid-template-columns:1fr;}
  .mod-row{grid-template-columns:1fr;gap:4px;}
  .day{padding:22px 18px 16px;border-radius:22px;}
  .tier-table th,.tier-table td{padding:10px 8px;font-size:14px;}
  .tier-table thead th{font-size:16px;}
  .form .row2{grid-template-columns:1fr;}
  .foot .wrap{grid-template-columns:1fr;}
  .close{padding:28px 22px;border-radius:24px;}
}
.foot a.logo{display:flex;}
/* Visitor chat */
.vc{position:fixed;right:20px;bottom:20px;z-index:60;}
.vc-fab{border:0;border-radius:999px;background:var(--pine);color:#fff;font:700 15px var(--text);padding:13px 20px;cursor:pointer;box-shadow:0 12px 30px rgba(15,61,46,.3);}
.vc-fab:hover{background:var(--leaf);}
.vc.open .vc-fab{display:none;}
.vc-panel{display:none;width:370px;height:min(560px,calc(100vh - 40px));background:#fff;border-radius:22px;border:1px solid var(--line);box-shadow:0 24px 70px rgba(15,61,46,.25);flex-direction:column;overflow:hidden;}
.vc.open .vc-panel{display:flex;}
.vc-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:var(--pine);color:#fff;}
.vc-head b{font:700 17px var(--display);}
.vc-x{border:0;background:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;}
.vc-msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--mist-2);}
.vc-q{align-self:flex-end;max-width:85%;background:var(--leaf);color:#fff;border-radius:16px 16px 4px 16px;padding:9px 13px;font-size:14.5px;}
.vc-a{max-width:92%;background:#fff;border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:10px 13px;font-size:14.5px;line-height:1.5;}
.vc-a p{margin:0 0 6px;} .vc-a p:last-child{margin:0;}
.vc-sugg{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.vc-sugg button{text-align:left;border:1px solid var(--line);background:var(--mist-2);border-radius:10px;padding:8px 11px;font:600 13.5px var(--text);color:var(--pine);cursor:pointer;}
.vc-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);}
.vc-form input{flex:1;border:1.5px solid var(--line);border-radius:999px;padding:10px 14px;font:500 14.5px var(--text);}
.vc-form input:focus{outline:none;border-color:var(--leaf);}
.vc-form .btn{padding:10px 16px;}
.vc-note{font-size:12px;color:var(--slate);text-align:center;padding:0 12px 10px;}
@media (max-width:620px){.vc{right:12px;bottom:12px;}.vc.open{inset:0;right:0;bottom:0;}.vc-panel{width:100%;height:100%;border-radius:0;border:0;}}