/* Brand Ratna — Premium v3
 * Services hub + sitewide micro-interactions.
 * Colors reference existing brand tokens: #154890 (blue), #FF5C00 (orange), #181414 (ink).
 */

/* ---------- Utility: reveal on scroll (progressive) ---------- */
.reveal-up { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal-up.in { opacity:1; transform:none; }
.reveal-up.d1 { transition-delay:.08s } .reveal-up.d2 { transition-delay:.16s } .reveal-up.d3 { transition-delay:.24s } .reveal-up.d4 { transition-delay:.32s } .reveal-up.d5 { transition-delay:.4s }

/* ---------- Section: services hub premium ---------- */
.svchub-hero {
  position:relative; overflow:hidden;
  padding: clamp(72px, 10vw, 128px) 0 clamp(56px, 8vw, 96px);
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(255,92,0,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(21,72,144,.10), transparent 60%),
    linear-gradient(180deg, #fff, #fbf9f5);
}
.svchub-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(21,72,144,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,72,144,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000 30%, transparent 75%);
}
.svchub-hero .wrap { position:relative; z-index:1; }
.svchub-hero .eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid rgba(21,72,144,.15); padding:8px 14px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#154890;
  box-shadow:0 6px 18px -10px rgba(21,72,144,.35);
}
.svchub-hero .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:#FF5C00;box-shadow:0 0 0 4px rgba(255,92,0,.15);}
.svchub-hero h1{
  font-family:'Fraunces',serif; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(38px, 6vw, 72px); line-height:1.02; margin:22px 0 18px; max-width:960px;
}
.svchub-hero h1 .accent{
  background:linear-gradient(120deg,#FF5C00 0%, #ff8a3d 55%, #154890 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.svchub-hero .lead{ max-width:720px; font-size:clamp(16px,1.4vw,19px); color:#3d3838; }
.svchub-hero .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.svchub-hero .trust {
  display:flex; flex-wrap:wrap; gap:22px 28px; margin-top:34px; padding-top:26px;
  border-top:1px dashed rgba(24,20,20,.18); max-width:820px;
}
.svchub-hero .trust b{ font-family:'Fraunces',serif; font-size:34px; line-height:1; color:#154890; display:block; }
.svchub-hero .trust span{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#605858; }

/* ---------- Services categories: pillar cards ---------- */
.pillars { padding: clamp(56px,7vw,96px) 0; }
.pillars .p-head { max-width:820px; margin-bottom:36px; }
.pillars .p-head .eyebrow{ color:#FF5C00; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:12px; }
.pillars .p-head h2{ font-family:'Fraunces',serif; font-weight:800; font-size:clamp(28px,3.4vw,44px); line-height:1.08; margin-top:10px; letter-spacing:-.01em; }
.pillars .p-head p{ color:#4a4444; max-width:680px; margin-top:12px; font-size:16px; }

.pillar-grid { display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width: 900px){ .pillar-grid { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  position:relative; overflow:hidden; border-radius:22px; padding:32px 28px 28px;
  background:#fff; border:1px solid rgba(24,20,20,.08);
  box-shadow: 0 1px 0 rgba(24,20,20,.02), 0 30px 60px -30px rgba(24,20,20,.12);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .3s;
  display:flex; flex-direction:column; min-height:100%;
}
.pillar::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:0;
  background: radial-gradient(400px 220px at var(--mx,50%) var(--my,0%), rgba(255,92,0,.08), transparent 60%);
  transition:opacity .5s;
}
.pillar:hover{ transform: translateY(-6px); box-shadow: 0 40px 80px -30px rgba(21,72,144,.22); border-color: rgba(21,72,144,.18); }
.pillar:hover::before{ opacity:1; }
.pillar > *{ position:relative; z-index:1; }

.pillar .num {
  font-family:'Fraunces',serif; font-weight:800; font-size:14px; color:#154890;
  display:inline-flex; align-items:center; gap:10px; letter-spacing:.14em; text-transform:uppercase;
}
.pillar .num::before{ content:""; width:28px; height:2px; background:linear-gradient(90deg,#154890,#FF5C00); border-radius:2px; }
.pillar h3{
  font-family:'Fraunces',serif; font-weight:800; font-size:28px; line-height:1.1; margin:14px 0 10px; letter-spacing:-.01em;
}
.pillar .kicker{ color:#605858; font-size:15px; line-height:1.55; margin-bottom:18px; }
.pillar ul.checks{ list-style:none; padding:0; margin:0 0 20px; display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.pillar ul.checks li{ position:relative; padding-left:22px; font-size:14px; color:#2c2828; line-height:1.5; }
.pillar ul.checks li::before{
  content:""; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%;
  background: conic-gradient(from 210deg, #154890, #FF5C00, #154890);
  box-shadow: inset 0 0 0 3px #fff;
}
.pillar .mini-stats{
  display:flex; gap:14px; margin: 6px 0 22px; padding:14px 16px; border-radius:14px;
  background:linear-gradient(180deg,#fbf9f5,#fff); border:1px solid rgba(24,20,20,.06);
}
.pillar .mini-stats div{ flex:1 1 0; }
.pillar .mini-stats b{ font-family:'Fraunces',serif; font-size:22px; color:#154890; display:block; line-height:1; }
.pillar .mini-stats span{ display:block; font-size:11px; color:#736c6c; letter-spacing:.06em; text-transform:uppercase; margin-top:6px; }
.pillar .foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:18px; border-top:1px dashed rgba(24,20,20,.14); }
.pillar .foot .cta { color:#154890; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:gap .3s, color .3s; }
.pillar .foot .cta:hover{ color:#FF5C00; gap:12px; }
.pillar .foot .price{ font-size:12px; color:#736c6c; letter-spacing:.05em; text-transform:uppercase; }

/* Featured pillar */
.pillar.is-featured{
  background: linear-gradient(160deg,#0f2f5f 0%,#154890 55%,#1e5aa8 100%);
  color:#fff; border-color: transparent;
}
.pillar.is-featured .num{ color:#ffb98a; }
.pillar.is-featured .num::before{ background:linear-gradient(90deg,#FF5C00,#fff); }
.pillar.is-featured h3, .pillar.is-featured .kicker, .pillar.is-featured ul.checks li{ color:#fff; }
.pillar.is-featured ul.checks li{ color: rgba(255,255,255,.9); }
.pillar.is-featured ul.checks li::before{ background: conic-gradient(from 200deg, #FF5C00, #fff, #FF5C00); box-shadow: inset 0 0 0 3px #154890; }
.pillar.is-featured .mini-stats{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }
.pillar.is-featured .mini-stats b{ color:#fff; }
.pillar.is-featured .mini-stats span{ color:rgba(255,255,255,.7); }
.pillar.is-featured .foot{ border-top-color: rgba(255,255,255,.2); }
.pillar.is-featured .foot .cta{ color:#FF5C00; }
.pillar.is-featured .foot .cta:hover{ color:#fff; }
.pillar.is-featured .foot .price{ color: rgba(255,255,255,.7); }

/* ---------- Deliverables mega grid ---------- */
.deliverables{ padding: clamp(48px,6vw,88px) 0; background:linear-gradient(180deg,#fbf9f5,#fff); }
.deliverables .d-head{ display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:28px; }
.deliverables .d-head h2{ font-family:'Fraunces',serif; font-weight:800; font-size:clamp(26px,3.2vw,40px); letter-spacing:-.01em; margin:0; }
.deliv-cols{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:900px){ .deliv-cols{ grid-template-columns: repeat(3,1fr); } }
.deliv-col{ background:#fff; border:1px solid rgba(24,20,20,.08); border-radius:18px; padding:24px; }
.deliv-col h4{ font-family:'Fraunces',serif; font-size:20px; margin:0 0 14px; color:#154890; }
.deliv-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.deliv-col li a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:10px; text-decoration:none; color:#181414; font-size:14px;
  border:1px solid transparent; transition:background .3s,border-color .3s,transform .3s;
}
.deliv-col li a::after{ content:"→"; opacity:.35; transition:transform .3s, opacity .3s; color:#FF5C00; }
.deliv-col li a:hover{ background:#fbf9f5; border-color: rgba(21,72,144,.15); transform: translateX(2px); }
.deliv-col li a:hover::after{ opacity:1; transform: translateX(4px); }

/* ---------- Outcomes / value strip ---------- */
.value-strip{ padding: clamp(48px,6vw,80px) 0; }
.value-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:700px){ .value-grid{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:1000px){ .value-grid{ grid-template-columns: repeat(4,1fr); } }
.value-card{ padding:22px; border-radius:16px; background:#fff; border:1px solid rgba(24,20,20,.08); transition:transform .35s, box-shadow .35s; }
.value-card:hover{ transform: translateY(-4px); box-shadow:0 30px 60px -30px rgba(21,72,144,.22); }
.value-card .ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#154890,#1e5aa8); color:#fff; font-family:'Fraunces',serif; font-weight:800; font-size:20px; margin-bottom:14px; }
.value-card:nth-child(2) .ico{ background:linear-gradient(135deg,#FF5C00,#ff8a3d); }
.value-card:nth-child(3) .ico{ background:linear-gradient(135deg,#181414,#3a3535); }
.value-card:nth-child(4) .ico{ background:linear-gradient(135deg,#154890,#FF5C00); }
.value-card h4{ font-family:'Fraunces',serif; font-size:19px; margin:0 0 6px; }
.value-card p{ color:#605858; font-size:14px; line-height:1.55; margin:0; }

/* ---------- Comparison table ---------- */
.compare{ padding: clamp(48px,6vw,80px) 0; }
.compare .wrap-inner{ background:#0f2f5f; color:#fff; border-radius:24px; padding:clamp(28px,4vw,44px); position:relative; overflow:hidden; }
.compare .wrap-inner::after{ content:""; position:absolute; inset:auto -20% -60% auto; width:60%; aspect-ratio:1; background:radial-gradient(circle, rgba(255,92,0,.35), transparent 60%); filter:blur(20px); }
.compare h2{ font-family:'Fraunces',serif; font-weight:800; font-size:clamp(24px,3vw,36px); margin:0 0 22px; }
.cmp-table{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:0; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.06); position:relative; z-index:1; }
.cmp-table > div{ padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); font-size:14px; }
.cmp-table .h{ font-weight:700; font-family:'Fraunces',serif; font-size:15px; background:rgba(255,255,255,.06); }
.cmp-table .h.us{ color:#FF5C00; }
.cmp-table .row-l{ color:rgba(255,255,255,.85); }
.cmp-table .yes{ color:#7ee6b8; font-weight:600; }
.cmp-table .no{ color:rgba(255,255,255,.5); }
@media(max-width:720px){ .cmp-table{ grid-template-columns:1fr 1fr; } .cmp-table .row-l{ grid-column:1/-1; background:rgba(255,255,255,.04); } }

/* ---------- Process timeline (premium) ---------- */
.timeline{ padding: clamp(48px,6vw,88px) 0; }
.timeline .steps{ position:relative; display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:900px){ .timeline .steps{ grid-template-columns: repeat(4,1fr); } .timeline .steps::before{ content:""; position:absolute; left:5%; right:5%; top:44px; height:2px; background:linear-gradient(90deg, rgba(21,72,144,.15), rgba(255,92,0,.35), rgba(21,72,144,.15)); z-index:0; } }
.tl-step{ position:relative; background:#fff; border:1px solid rgba(24,20,20,.08); border-radius:18px; padding:22px; z-index:1; transition:transform .4s, box-shadow .4s; }
.tl-step:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(21,72,144,.2); }
.tl-step .badge{ display:inline-block; padding:5px 10px; border-radius:999px; background:#fbf9f5; border:1px solid rgba(24,20,20,.08); font-size:11px; color:#154890; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.tl-step .n{ font-family:'Fraunces',serif; font-weight:800; font-size:44px; color:#154890; line-height:1; margin:14px 0 8px; }
.tl-step h4{ font-family:'Fraunces',serif; font-size:20px; margin:0 0 8px; }
.tl-step p{ color:#605858; font-size:14px; line-height:1.55; margin:0; }

/* ---------- Sticky CTA rail ---------- */
.cta-rail{
  padding: clamp(56px,8vw,96px) 0;
}
.cta-rail .box{
  position:relative; overflow:hidden; border-radius:26px;
  background: linear-gradient(120deg,#181414 0%, #2b1f1f 50%, #FF5C00 200%);
  color:#fff; padding: clamp(30px,5vw,56px); display:grid; gap:24px;
}
@media(min-width:820px){ .cta-rail .box{ grid-template-columns: 1.4fr .8fr; align-items:center; } }
.cta-rail .box::after{ content:""; position:absolute; right:-10%; top:-30%; width:60%; aspect-ratio:1; background: radial-gradient(circle, rgba(255,92,0,.5), transparent 60%); filter:blur(30px); }
.cta-rail h2{ font-family:'Fraunces',serif; font-weight:800; font-size:clamp(26px,3.4vw,40px); line-height:1.1; margin:0 0 12px; position:relative; z-index:1; }
.cta-rail p{ color:rgba(255,255,255,.85); font-size:16px; max-width:520px; position:relative; z-index:1; }
.cta-rail .actions{ display:flex; flex-wrap:wrap; gap:10px; position:relative; z-index:1; }
.cta-rail .btn{ background:#FF5C00; color:#fff; padding:14px 22px; border-radius:999px; font-weight:700; text-decoration:none; border:1px solid transparent; transition:transform .3s, box-shadow .3s; display:inline-flex; align-items:center; gap:8px; }
.cta-rail .btn:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -12px rgba(255,92,0,.6); }
.cta-rail .btn.ghost{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.cta-rail .assur{ display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:16px; position:relative; z-index:1; }
.cta-rail .assur span{ font-size:12px; color:rgba(255,255,255,.75); display:inline-flex; gap:8px; align-items:center; }
.cta-rail .assur span::before{ content:"✓"; color:#7ee6b8; font-weight:700; }

/* ---------- FAQ premium ---------- */
.faq-premium { padding: clamp(48px,6vw,88px) 0; }
.faq-premium details{
  background:#fff; border:1px solid rgba(24,20,20,.08); border-radius:14px;
  padding:0; margin-bottom:12px; overflow:hidden; transition:border-color .3s, box-shadow .3s;
}
.faq-premium details[open]{ border-color: rgba(21,72,144,.25); box-shadow:0 20px 40px -20px rgba(21,72,144,.2); }
.faq-premium summary{
  list-style:none; cursor:pointer; padding:18px 22px; font-family:'Fraunces',serif; font-weight:700;
  font-size:17px; color:#181414; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-premium summary::-webkit-details-marker{display:none;}
.faq-premium summary::after{
  content:"+"; font-family:'Inter',sans-serif; font-weight:400; font-size:22px; color:#FF5C00;
  transition:transform .3s;
}
.faq-premium details[open] summary::after{ content:"×"; transform:rotate(90deg); color:#154890; }
.faq-premium .a{ padding: 4px 22px 20px; color:#4a4444; font-size:15px; line-height:1.65; }

/* ---------- Micro-interactions ---------- */
.pillar, .value-card, .deliv-col, .tl-step { will-change: transform; }

/* Motion-safe */
@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity:1 !important; transform:none !important; transition:none !important; }
  .pillar:hover, .value-card:hover, .tl-step:hover{ transform:none; }
}