/* ============================================================
   Muscat Assignment Help — site layer
   Warm + bright skin over the design-system tokens + kit.
   ============================================================ */

:root{
  /* warm substrate */
  --warm-bg:    #FFFDF7;
  --warm-soft:  #F6EACB;
  --warm-line:  #EFE2C4;
  /* Oman-green accent (grounded in success scale) */
  --oman-50:  #E7F7F0;
  --oman-100: #C9EEE0;
  --oman-400: #19A47C;
  --oman-500: #0E8C68;
  --oman-700: #0B6147;
}

html, body{ background: var(--warm-bg); }
body{ overflow-x: hidden; }

/* soft sections become warm cream, dark sections deep navy */
.section.soft{ background: var(--warm-soft); }
.section.cream{ background: var(--warm-soft); }
.section.mint{ background: #E9F7F0; }
.section.sky{ background: #EDF3FF; }
.section.dark{ background: var(--brand-blue-900); }

/* fix glow path + warm it */
.hero{ background: var(--warm-bg); padding-top: 64px; }
.hero-glow{ background-image: url('../assets/glow.svg'); }

img{ max-width: 100%; }

/* ---------------- Skip + base focus ---------------- */
.skip{ position:absolute; left:-9999px; }
:focus-visible{ outline: 3px solid var(--brand-blue-400); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   ICON SPRITE helper
   ============================================================ */
.ic{ width: 20px; height: 20px; display:inline-block; vertical-align: middle; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.nav-wrap{ padding: 0; top: 0; }
.nav{
  max-width: 100%;
  border-radius: 0;
  border-left: none; border-right: none; border-top: none;
  border-bottom: 1px solid var(--warm-line);
  box-shadow: var(--shadow-sm);
  padding: 13px max(20px, calc((100% - 1200px) / 2));
}
.nav-links a{ padding: 6px 2px; }
.nav-links a.active{ color: var(--brand-blue-600); }
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: var(--brand-gold-400); border-radius:2px;
  transform: scaleX(0); transform-origin:left; transition: transform var(--dur-base) var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after{ transform: scaleX(1); }

.nav-toggle{ display:none; background:var(--brand-blue-50); border:none; width:44px; height:44px; border-radius:12px; cursor:pointer; color:var(--brand-blue-800); align-items:center; justify-content:center; }
.nav-toggle .ic{ width:24px; height:24px; }

.mobile-menu{
  display:none; position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(14,21,37,0.45); backdrop-filter: blur(4px);
}
.mobile-menu.open{ display:block; }
.mobile-panel{
  position:absolute; top:0; right:0; width: min(86vw, 360px); height:100%;
  background:#fff; box-shadow: var(--shadow-xl); padding: 22px;
  display:flex; flex-direction:column; gap: 6px;
  transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out);
}
.mobile-menu.open .mobile-panel{ transform: translateX(0); }
.mobile-panel .mp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.mobile-panel a.mp-link{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--fg-strong); padding:14px 8px; border-bottom:1px solid var(--border-soft); text-decoration:none; }
.mobile-panel a.mp-link:hover{ color: var(--brand-blue-600); }
.mobile-panel .btn{ margin-top: 14px; }

/* ============================================================
   HERO
   ============================================================ */
.hero-grid{ grid-template-columns: 1.12fr 0.88fr; }
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 4px; }
.hero-title{ letter-spacing: -0.025em; }
.hero-title em::after{ background: var(--brand-gold-300); height:34%; }
.hero-rating{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; color:var(--fg-strong); }
.hero-rating .stars{ color: var(--brand-gold-400); display:inline-flex; }
.hero-statline{ margin-top: 26px; display:flex; gap:0; flex-wrap:wrap; align-items:stretch; }
.hero-statline .hs{ display:flex; flex-direction:column; justify-content:flex-start; gap:5px; padding:2px 20px; }
.hero-statline .hs:first-child{ padding-left:0; }
.hero-statline .hs b{ font-family:var(--font-display); font-weight:900; font-size:24px; color:var(--brand-blue-800); line-height:1; display:flex; align-items:center; gap:6px; }
.hero-statline .hs span{ font-size:12.5px; color:var(--fg-muted); max-width:155px; line-height:1.35; }
.hero-statline .hs + .hs{ border-left:1px solid var(--warm-line); }

/* floating quote card */
.quote-card select.input{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6B82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; cursor:pointer; color:var(--fg-strong); }
.file-field{ display:flex; align-items:center; gap:10px; height:48px; padding:0 14px; border:1.5px dashed var(--border); border-radius:var(--radius-md); background:var(--warm-soft); cursor:pointer; font-size:14px; color:var(--fg-muted); font-family:var(--font-body); transition:.15s; overflow:hidden; }
.file-field:hover{ border-color:var(--brand-blue-400); color:var(--brand-blue-700); }
.file-field input[type=file]{ display:none; }
.file-field .ic{ width:18px; height:18px; flex:none; color:var(--brand-blue-600); }
.file-field .fname{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* prominent multi-file dropzone */
.file-field.big{ height:auto; align-items:center; gap:14px; padding:16px 18px; border-width:2px; background:#fff; }
.file-field.big:hover{ background:var(--brand-blue-50); }
.file-field.big .ff-ic{ width:42px; height:42px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,var(--brand-blue-200),var(--brand-blue-50)); color:var(--brand-blue-600); }
.file-field.big .ff-ic .ic{ width:22px; height:22px; }
.file-field.big .ff-text{ display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.file-field.big .fname{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--fg-strong); }
.file-field.big .ff-hint{ font-size:12px; color:var(--fg-muted); }
.quote-card::before{ background: linear-gradient(135deg, rgba(255,189,36,0.5), rgba(25,164,124,0.28)); }
.quote-card .qrow{ display:flex; gap:10px; align-items:center; margin-top:6px; color:var(--fg-muted); font-size:13px; }
.qtrust{ display:flex; align-items:center; gap:8px; margin-top:16px; padding-top:16px; border-top:1px dashed var(--warm-line); font-size:13px; color:var(--fg-muted); }
.qtrust .ic{ width:18px; height:18px; color: var(--oman-500); }

.float-card{ animation: floaty 6s var(--ease-in-out) infinite; }
@keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

/* mini badges floating around hero card */
.badge-chip{
  position:absolute; background:#fff; border:1px solid var(--warm-line); border-radius:14px;
  box-shadow: var(--shadow-md); padding:10px 14px; display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--fg-strong);
}
.badge-chip .ic{ color: var(--oman-500); }
.badge-chip.b1{ top:-18px; left:-22px; animation: floaty 5s var(--ease-in-out) infinite; }
.badge-chip.b2{ bottom:18px; right:-26px; animation: floaty 7s var(--ease-in-out) infinite 0.6s; }

/* ============================================================
   GENERIC SECTION HEADINGS
   ============================================================ */
.section-head .eyebrow{ display:inline-block; margin-bottom:6px; }
.section-head{ max-width: 980px; }
.section-head p{ max-width: 760px; margin-left:auto; margin-right:auto; }
.eyebrow.gold{ color: var(--brand-gold-600); }
.eyebrow.green{ color: var(--oman-500); }

.center-eyebrow{ display:flex; flex-direction:column; align-items:center; }

/* lead paragraph max width */
.measure{ max-width: 720px; }
.measure-narrow{ max-width: 600px; }

/* ============================================================
   CHIPS / PILLS extra
   ============================================================ */
.chip-green{ background: var(--oman-50); color: var(--oman-700); }
.chip-lg{ font-size:14px; padding:8px 16px; }
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* ============================================================
   FEATURE / WHY cards — playful
   ============================================================ */
.feature-card .ic-tile{
  width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  background: var(--brand-blue-50); color: var(--brand-blue-600);
  transition: transform var(--dur-base) var(--ease-spring);
}
.feature-card .ic-tile .ic{ width:26px; height:26px; }
.feature-card:hover .ic-tile{ transform: rotate(-6deg) scale(1.08); }
.feature-card .ic-tile.gold{ background: var(--brand-gold-100); color: var(--brand-gold-700); }
.feature-card .ic-tile.green{ background: var(--oman-50); color: var(--oman-500); }
.feature-card .ic-tile.navy{ background: var(--brand-blue-800); color: var(--brand-gold-300); }

/* ============================================================
   PROCESS STEPS — connected
   ============================================================ */
.steps-grid.four{ grid-template-columns: repeat(4,1fr); }
.step{ overflow:hidden; }
.step::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--brand-gold-400), var(--oman-400));
}
.step-num{ color: var(--brand-gold-300); }
.step-ic{ background: var(--oman-50); color: var(--oman-500); }

/* ============================================================
   SUBJECTS grid
   ============================================================ */
.subj-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
.subj-card{
  background:#fff; border:1px solid var(--warm-line); border-radius: var(--radius-xl);
  padding:22px 24px; box-shadow: var(--shadow-sm); display:flex; gap:16px; align-items:flex-start;
  transition: .2s var(--ease-out);
}
.subj-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-gold-200); }
.subj-card .ic-tile{ width:46px; height:46px; border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--brand-blue-50); color:var(--brand-blue-600); }
.subj-card .ic-tile .ic{ width:23px; height:23px; }
.subj-card h3{ font-size:18px; margin:0 0 4px; }
.subj-card p{ font-size:14px; color:var(--fg-muted); margin:0; line-height:1.55; }

/* ============================================================
   PIPELINE / numbered list
   ============================================================ */
.included-list.long .name{ font-weight:600 !important; font-size:14px !important; line-height:1.5; }
.pipeline{ display:flex; flex-direction:column; gap:0; max-width:820px; margin:0 auto; }
.pl-row{ display:flex; gap:20px; align-items:flex-start; padding:18px 0; border-bottom:1px dashed var(--warm-line); }
.pl-row:last-child{ border-bottom:none; }
.pl-num{ flex:none; width:42px; height:42px; border-radius:12px; background:var(--brand-blue-800); color:var(--brand-gold-300); font-family:var(--font-display); font-weight:900; display:flex; align-items:center; justify-content:center; font-size:17px; }
.pl-row h3{ font-size:18px; margin:0 0 4px; }
.pl-row p{ margin:0; color:var(--fg-muted); font-size:15px; line-height:1.6; }

/* ============================================================
   COMPARISON (us vs them)
   ============================================================ */
.compare{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.cmp-col{ background:#fff; border:1px solid var(--warm-line); border-radius:var(--radius-xl); padding:26px 24px; box-shadow:var(--shadow-sm); }
.cmp-col.win{ border:1.5px solid var(--brand-gold-400); box-shadow: 0 18px 48px rgba(255,189,36,0.20); position:relative; }
.cmp-col.win .cmp-head{ color: var(--brand-blue-800); }
.cmp-col .cmp-head{ font-family:var(--font-display); font-weight:800; font-size:18px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.cmp-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.cmp-col li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-700); line-height:1.5; }
.cmp-col li .ic{ flex:none; width:18px; height:18px; margin-top:2px; }
.cmp-col.win li .ic{ color: var(--oman-500); }
.cmp-col.lose li .ic{ color: var(--danger-500); }
.cmp-tag{ position:absolute; top:-13px; left:24px; background:var(--brand-gold-400); color:var(--ink-900); font-family:var(--font-display); font-weight:800; font-size:12px; padding:5px 12px; border-radius:999px; }

/* ============================================================
   STATS band
   ============================================================ */
.stat-num small{ color: var(--brand-gold-300); }

/* ============================================================
   UNIVERSITY marquee
   ============================================================ */
.uni-strip{ overflow:hidden; padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.uni-track{ display:flex; gap:14px; width:max-content; animation: marquee 32s linear infinite; }
.uni-strip:hover .uni-track{ animation-play-state: paused; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.uni-chip{ flex:none; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--warm-line); border-radius:999px; padding:10px 20px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--brand-blue-800); box-shadow:var(--shadow-xs); }
.uni-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-gold-400); }

/* ============================================================
   PRICING
   ============================================================ */
.price-card .pprice small{ font-size:15px; }
.price-card .ptop{ display:flex; align-items:center; gap:10px; }
.price-card .ic-tile{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--brand-blue-50); color:var(--brand-blue-600); }
.price-card.feat .ic-tile{ background:var(--brand-gold-100); color:var(--brand-gold-700); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tcard{ position:relative; }
.tcard .quote-mark{ font-family:var(--font-display); font-weight:900; font-size:54px; line-height:0.6; color:var(--brand-gold-300); height:24px; }
.tcard .who .meta-uni{ color:var(--oman-500); font-weight:700; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{ background: linear-gradient(135deg, var(--brand-blue-900) 0%, var(--brand-blue-600) 100%); }
.cta-band .actions{ justify-content:flex-end; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-item.open .faq-a{ max-height: 460px; }
.faq-a-inner{ font-size:15px; }

/* ============================================================
   FLOATING CTA
   ============================================================ */
.float-cta{ z-index: var(--z-sticky); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background: var(--brand-blue-900); }
.footer .brand img{ height:40px; }
.footer-contact{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.footer-contact a, .footer-contact span{ display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,0.8); font-size:13.5px; text-decoration:none; }
.footer-contact a:hover{ color:#fff; }
.footer-contact .ic{ width:16px; height:16px; color:var(--brand-gold-300); }
.footer-disclaimer{ padding:22px 0 4px; color:rgba(255,255,255,0.45); font-size:12px; line-height:1.6; }
.footer-cta{ display:flex; align-items:center; gap:10px; color:var(--brand-gold-300); font-family:var(--font-display); font-weight:700; font-size:14px; margin-top:6px; }

/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.page-hero{ position:relative; padding: 96px 0 64px; background: var(--warm-bg); overflow:hidden; }
.page-hero .hero-glow{ opacity:0.9; }
.page-hero .inner{ position:relative; z-index:1; max-width: 760px; }
.page-hero .inner{ margin:0 auto; text-align:center; }
.page-hero .inner .breadcrumb{ justify-content:center; }
.page-hero .inner .lead{ margin-left:auto; margin-right:auto; }
.page-hero .inner .hero-actions{ justify-content:center; }
.page-hero .inner .author-row{ justify-content:center; }
.page-hero h1{ font-family:var(--font-display); font-weight:900; font-size: clamp(2.2rem, 3.4vw + 1rem, 3.4rem); line-height:1.06; letter-spacing:-0.025em; margin:14px 0 16px; }
.page-hero .lead{ font-size:19px; }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--fg-muted); font-family:var(--font-display); font-weight:600; }
.breadcrumb a{ color:var(--fg-muted); }
.breadcrumb a:hover{ color:var(--brand-blue-600); }
.breadcrumb .sep{ color:var(--ink-300); }

/* ============================================================
   PROSE (legal + blog article)
   ============================================================ */
.prose{ max-width: 760px; margin:0 auto; }
.prose h2{ font-size:26px; margin: 38px 0 14px; }
.prose h3{ font-size:20px; margin: 28px 0 10px; }
.prose p{ font-size:16.5px; line-height:1.75; color:var(--ink-700); margin:0 0 16px; }
.prose ul, .prose ol{ margin:0 0 18px; padding-left: 22px; color:var(--ink-700); line-height:1.75; }
.prose li{ margin-bottom:8px; }
.prose a{ color: var(--brand-blue-600); text-decoration: underline; text-underline-offset: 3px; }
.prose strong{ color: var(--fg-strong); }
.prose .lead{ font-size:19px; color:var(--ink-600); margin-bottom:24px; }
.prose blockquote{ margin:24px 0; padding:18px 24px; border-left:4px solid var(--brand-gold-400); background:var(--warm-soft); border-radius:0 14px 14px 0; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--brand-blue-800); }
.legal-meta{ font-size:14px; color:var(--fg-muted); margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--warm-line); }

/* table of contents */
.toc{ background:#fff; border:1px solid var(--warm-line); border-radius:var(--radius-xl); padding:22px 24px; box-shadow:var(--shadow-sm); margin-bottom:28px; }
.toc h4{ font-family:var(--font-display); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:0.08em; color:var(--fg-muted); margin:0 0 12px; }
.toc ol{ margin:0; padding-left:20px; }
.toc li{ margin-bottom:8px; }
.toc a{ color:var(--brand-blue-700); font-weight:600; font-size:14.5px; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.post-card{ background:#fff; border:1px solid var(--warm-line); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-sm); transition:.2s var(--ease-out); display:flex; flex-direction:column; }
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.post-thumb{ aspect-ratio: 16/10; position:relative; display:flex; align-items:flex-end; padding:18px; }
.post-thumb .cat{ position:relative; z-index:1; background:rgba(255,255,255,0.92); color:var(--brand-blue-800); font-family:var(--font-display); font-weight:800; font-size:12px; padding:5px 12px; border-radius:999px; }
.post-thumb .glyph{ position:absolute; right:14px; top:14px; color:rgba(255,255,255,0.55); }
.post-thumb .glyph .ic{ width:46px; height:46px; }
.post-body{ padding:22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-body h3{ font-size:19px; line-height:1.3; margin:0; }
.post-body h3 a{ color:var(--fg-strong); }
.post-body h3 a:hover{ color:var(--brand-blue-600); }
.post-body p{ font-size:14.5px; color:var(--fg-muted); margin:0; line-height:1.6; }
.post-meta{ margin-top:auto; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--fg-muted); font-family:var(--font-display); font-weight:600; }
.post-card.feat{ grid-column: span 3; flex-direction:row; }
.post-card.feat .post-thumb{ aspect-ratio:auto; flex:1.1; min-height:300px; }
.post-card.feat .post-body{ flex:1; justify-content:center; padding:40px; }
.post-card.feat .post-body h3{ font-size:30px; }
.post-card.feat .post-body p{ font-size:16px; }

/* article hero / share */
.article-hero{ aspect-ratio: 21/9; border-radius: var(--radius-2xl); display:flex; align-items:flex-end; padding:32px; margin-bottom:36px; position:relative; overflow:hidden; }
.article-hero .glyph{ position:absolute; right:24px; top:24px; color:rgba(255,255,255,0.5); }
.article-hero .glyph .ic{ width:90px; height:90px; }
.author-row{ display:flex; align-items:center; gap:12px; }
.author-row img{ width:48px; height:48px; border-radius:50%; }
.author-row .n{ font-family:var(--font-display); font-weight:800; color:var(--fg-strong); font-size:15px; }
.author-row .r{ font-size:13px; color:var(--fg-muted); }

/* gradient thumb helpers */
.g-navy{ background: linear-gradient(135deg, var(--brand-blue-800), var(--brand-blue-500)); }
.g-gold{ background: linear-gradient(135deg, var(--brand-gold-500), var(--brand-gold-300)); }
.g-green{ background: linear-gradient(135deg, var(--oman-500), var(--oman-400)); }
.g-mix{ background: linear-gradient(135deg, var(--brand-blue-700), var(--oman-500)); }
.g-clay{ background: linear-gradient(135deg, #A14A22, #E08A4A); }

/* ============================================================
   EXPERTS
   ============================================================ */
.expert-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.expert-card{ background:#fff; border:1px solid var(--warm-line); border-radius:var(--radius-xl); padding:26px; box-shadow:var(--shadow-sm); transition:.2s var(--ease-out); }
.expert-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.expert-card .top{ display:flex; gap:16px; align-items:center; margin-bottom:16px; }
.expert-card img{ width:68px; height:68px; border-radius:50%; }
.expert-card .name{ font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--fg-strong); }
.expert-card .deg{ font-size:13px; color:var(--oman-500); font-weight:700; font-family:var(--font-display); }
.expert-card .bio{ font-size:14.5px; color:var(--ink-600); line-height:1.6; margin:0 0 16px; }
.expert-card .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.expert-card .tag{ background:var(--brand-blue-50); color:var(--brand-blue-700); font-size:12px; font-weight:700; font-family:var(--font-display); padding:5px 11px; border-radius:999px; }
.expert-card .estats{ display:flex; gap:18px; padding-top:14px; border-top:1px solid var(--warm-line); }
.expert-card .estats .es b{ font-family:var(--font-display); font-weight:900; color:var(--brand-blue-800); font-size:17px; display:block; }
.expert-card .estats .es span{ font-size:11.5px; color:var(--fg-muted); }
.expert-card .badge-top{ display:inline-flex; align-items:center; gap:6px; background:var(--brand-gold-100); color:var(--brand-gold-700); font-size:11.5px; font-weight:800; font-family:var(--font-display); padding:4px 10px; border-radius:999px; margin-left:auto; }

/* ============================================================
   REVIEWS page
   ============================================================ */
.rev-summary{ display:grid; grid-template-columns: auto 1fr; gap:40px; align-items:center; background:#fff; border:1px solid var(--warm-line); border-radius:var(--radius-2xl); padding:36px 40px; box-shadow:var(--shadow-md); }
.rev-big{ text-align:center; }
.rev-big .score{ font-family:var(--font-display); font-weight:900; font-size:68px; line-height:1; color:var(--brand-blue-800); }
.rev-big .stars{ color:var(--brand-gold-400); display:flex; gap:2px; justify-content:center; margin:8px 0; }
.rev-big .count{ font-size:14px; color:var(--fg-muted); }
.rev-bars{ display:flex; flex-direction:column; gap:10px; }
.rev-bar{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--fg-muted); font-family:var(--font-display); font-weight:700; }
.rev-bar .track{ flex:1; height:9px; border-radius:999px; background:var(--warm-soft); overflow:hidden; }
.rev-bar .fill{ height:100%; border-radius:999px; background:var(--brand-gold-400); }
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:32px; }
.filter-btn{ background:#fff; border:1.5px solid var(--warm-line); border-radius:999px; padding:9px 18px; font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--fg-muted); cursor:pointer; transition:.15s; }
.filter-btn:hover{ border-color:var(--brand-blue-300); color:var(--brand-blue-700); }
.filter-btn.active{ background:var(--brand-blue-800); color:#fff; border-color:var(--brand-blue-800); }
.review-masonry{ columns: 3; column-gap: 22px; }
.review-masonry .tcard{ break-inside: avoid; margin-bottom: 22px; display:inline-flex; width:100%; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:start; }
.contact-info{ display:flex; flex-direction:column; gap:16px; }
.info-card{ background:#fff; border:1px solid var(--warm-line); border-radius:var(--radius-xl); padding:22px 24px; box-shadow:var(--shadow-sm); display:flex; gap:16px; align-items:flex-start; }
.info-card .ic-tile{ width:48px; height:48px; border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--brand-blue-50); color:var(--brand-blue-600); }
.info-card .ic-tile.green{ background:var(--oman-50); color:var(--oman-500); }
.info-card .ic-tile.gold{ background:var(--brand-gold-100); color:var(--brand-gold-700); }
.info-card h3{ font-size:16px; margin:0 0 3px; }
.info-card p, .info-card a{ font-size:14.5px; color:var(--fg-muted); margin:0; line-height:1.55; }
.info-card a:hover{ color:var(--brand-blue-600); }
.form-card{ background:#fff; border:1px solid var(--warm-line); border-radius:var(--radius-2xl); padding:32px; box-shadow:var(--shadow-md); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.form-field{ margin-bottom:14px; }
.field-error{ color:var(--danger-500); font-size:12.5px; margin-top:5px; display:none; }
.input.invalid{ border-color:var(--danger-500); }
.form-success{ display:none; text-align:center; padding:20px 0; }
.form-success .ic-big{ width:72px; height:72px; border-radius:50%; background:var(--oman-50); color:var(--oman-500); display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; }
.form-success .ic-big .ic{ width:36px; height:36px; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .uni-track, .float-card, .badge-chip{ animation:none !important; }
}

/* shimmer on CTA */
.btn-cta{ position:relative; overflow:hidden; }
.btn-cta::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg); transition: none;
}
.btn-cta:hover::after{ animation: shine .8s var(--ease-out); }
@keyframes shine{ from{ left:-120%; } to{ left:140%; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px){
  .feature-grid{ grid-template-columns: repeat(2,1fr); }
  .writer-grid{ grid-template-columns: repeat(2,1fr); }
  .blog-grid{ grid-template-columns: repeat(2,1fr); }
  .expert-grid{ grid-template-columns: repeat(2,1fr); }
  .bento{ grid-template-columns: repeat(2,1fr); }
  .review-masonry{ columns:2; }
  .steps-grid, .steps-grid.four{ grid-template-columns: repeat(2,1fr); }
  .stats-band{ grid-template-columns: repeat(2,1fr); gap:28px; }
  .compare{ grid-template-columns:1fr; }
  .pricing-grid{ grid-template-columns:1fr; max-width:440px; }
  .price-card.feat{ transform:none; }
}
@media (max-width: 860px){
  .nav-links, .nav-actions .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .hero-grid{ grid-template-columns: 1fr; gap:40px; }
  .hero-side{ max-width:480px; }
  .contact-grid{ grid-template-columns:1fr; gap:28px; }
  .cta-band{ grid-template-columns:1fr; padding:40px 32px; text-align:center; }
  .cta-band .actions{ justify-content:center; }
  .post-card.feat{ flex-direction:column; }
  .post-card.feat .post-thumb{ min-height:200px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap:28px; }
  .included{ grid-template-columns:1fr; gap:24px; }
  .rev-summary{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width: 600px){
  .container{ padding: 0 18px; }
  .section{ padding: var(--section-y-sm) 0; }
  .feature-grid, .writer-grid, .blog-grid, .expert-grid, .subj-grid,
  .steps-grid, .steps-grid.four, .stats-band, .form-grid, .field-row{ grid-template-columns: 1fr; }
  .review-masonry{ columns:1; }
  .section-head{ margin-bottom:36px; }
  .section-head p{ font-size:16.5px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .badge-chip{ display:none; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; gap:10px; text-align:center; }
  .cta-band h2{ font-size:28px; }
  .page-hero{ padding:80px 0 48px; }

  /* ---- Services bento → horizontal slider ---- */
  .bento{
    display:flex; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory;
    gap:14px; padding:4px 0 14px; margin:0 -18px; padding-left:18px; padding-right:18px;
    -webkit-overflow-scrolling:touch;
  }
  .bento::-webkit-scrollbar{ height:6px; }
  .bento::-webkit-scrollbar-thumb{ background:var(--warm-line); border-radius:99px; }
  .bento-card{ flex:0 0 80%; scroll-snap-align:start; }
  .bento-card.span-2, .bento-card.row-2, .bento-card.feature, .bento-card.gold-feature{ grid-column:auto; grid-row:auto; }
  .bento-card.feature{ flex:0 0 86%; }

  /* ---- Testimonials → horizontal slider ---- */
  .tg{
    display:flex !important; grid-template-columns:none !important;
    overflow-x:auto; scroll-snap-type:x mandatory;
    gap:16px; padding:4px 0 14px; margin:0 -18px; padding-left:18px; padding-right:18px;
    -webkit-overflow-scrolling:touch;
  }
  .tg::-webkit-scrollbar{ height:6px; }
  .tg::-webkit-scrollbar-thumb{ background:var(--warm-line); border-radius:99px; }
  .tg .tcard{ flex:0 0 86%; scroll-snap-align:start; }

  .swipe-hint{ display:flex; }
}

/* swipe hint (mobile only) */
.swipe-hint{ display:none; align-items:center; justify-content:center; gap:8px; margin-top:14px; color:var(--fg-muted); font-size:13px; font-family:var(--font-display); font-weight:600; }
.swipe-hint .ic{ width:16px; height:16px; animation: nudge 1.4s var(--ease-in-out) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(-3px);} 50%{ transform:translateX(3px);} }

/* ============================================================
   ANIMATED GRADIENT CTA STRIP (alternating between sections)
   ============================================================ */
.cta-strip{ display:flex; justify-content:center; padding: 8px 0 4px; }
.btn-grad{
  color:#fff;
  background: linear-gradient(120deg, var(--brand-blue-700), var(--oman-500) 38%, var(--brand-gold-500) 64%, var(--brand-blue-600));
  background-size: 280% 100%;
  box-shadow: var(--shadow-lg);
  animation: gradShift 7s var(--ease-in-out) infinite;
}
.btn-grad:hover{ transform: translateY(-2px); filter:saturate(1.1); }
@keyframes gradShift{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
@media (prefers-reduced-motion: reduce){ .btn-grad{ animation:none; } }

/* ============================================================
   SECTION BACKGROUND PATTERNS
   ============================================================ */
.section.pattern{ position:relative; }
.section.pattern::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: url('../assets/pattern-dots.svg');
  background-size: 22px 22px;
  opacity:0.5;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 75%);
}
.section.pattern > .container{ position:relative; z-index:1; }

/* gradient-background section */
.section.grad{ background: linear-gradient(135deg, var(--warm-soft) 0%, var(--oman-50) 55%, var(--brand-gold-50) 100%); }

/* ============================================================
   COLORFUL GRADIENT CARDS (site-wide) + animated accent
   ============================================================ */
.feature-grid > *:nth-child(4n+1), .subj-grid > *:nth-child(4n+1), .expert-grid > *:nth-child(4n+1), .blog-grid > *:nth-child(4n+1), .tg > *:nth-child(4n+1){ background:linear-gradient(158deg,#ffffff 48%, #EAF1FF); }
.feature-grid > *:nth-child(4n+2), .subj-grid > *:nth-child(4n+2), .expert-grid > *:nth-child(4n+2), .blog-grid > *:nth-child(4n+2), .tg > *:nth-child(4n+2){ background:linear-gradient(158deg,#ffffff 48%, #FFF6DD); }
.feature-grid > *:nth-child(4n+3), .subj-grid > *:nth-child(4n+3), .expert-grid > *:nth-child(4n+3), .blog-grid > *:nth-child(4n+3), .tg > *:nth-child(4n+3){ background:linear-gradient(158deg,#ffffff 48%, #E2F5EC); }
.feature-grid > *:nth-child(4n), .subj-grid > *:nth-child(4n), .expert-grid > *:nth-child(4n), .blog-grid > *:nth-child(4n), .tg > *:nth-child(4n){ background:linear-gradient(158deg,#ffffff 48%, #FBEBE0); }

.bento-card:not(.feature):not(.gold-feature):nth-child(odd){ background:linear-gradient(158deg,#fff 42%, #EAF1FF); }
.bento-card:not(.feature):not(.gold-feature):nth-child(even){ background:linear-gradient(158deg,#fff 42%, #E2F5EC); }
.pricing-grid .price-card:not(.feat):nth-child(1){ background:linear-gradient(158deg,#fff 52%, #EAF1FF); }
.pricing-grid .price-card:not(.feat):nth-child(3){ background:linear-gradient(158deg,#fff 52%, #E2F5EC); }

/* animated gradient accent bar revealed on hover */
.feature-card, .subj-card, .expert-card, .tcard, .post-card{ position:relative; overflow:hidden; }
.feature-card::after, .subj-card::after, .expert-card::after, .tcard::after{
  content:''; position:absolute; left:0; right:0; top:0; height:4px; z-index:2;
  background:linear-gradient(120deg, var(--brand-blue-500), var(--oman-500), var(--brand-gold-400), var(--brand-blue-500));
  background-size:280% 100%; opacity:0; transition:opacity .3s var(--ease-out); animation:gradShift 6s var(--ease-in-out) infinite;
}
.feature-card:hover::after, .subj-card:hover::after, .expert-card:hover::after, .tcard:hover::after{ opacity:1; }

/* gradient icon tiles */
.ic-tile{ background-image:linear-gradient(140deg, var(--brand-blue-200), var(--brand-blue-50)); }
.ic-tile.gold{ background-image:linear-gradient(140deg, var(--brand-gold-200), var(--brand-gold-50)); }
.ic-tile.green{ background-image:linear-gradient(140deg, var(--oman-100), var(--oman-50)); }
.ic-tile.navy{ background-image:none; }
.bento-card .ic-lg{ background-image:linear-gradient(140deg, var(--brand-blue-200), var(--brand-blue-50)); }
.bento-card.feature .ic-lg, .bento-card.gold-feature .ic-lg{ background-image:none; }

/* ============================================================
   SUBJECT MODULE CODES
   ============================================================ */
.subj-codes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.subj-codes span{ font-family:var(--font-ui); font-size:11px; font-weight:600; color:var(--brand-blue-700); background:rgba(42,91,234,0.09); border-radius:6px; padding:3px 8px; letter-spacing:0.02em; }

/* ============================================================
   WRITER MINI CARDS (choose-a-writer style)
   ============================================================ */
.writer-mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
.wm-card{ background:#fff; border:1px solid var(--warm-line); border-radius:var(--radius-xl); padding:22px; box-shadow:var(--shadow-sm); transition:.2s var(--ease-out); position:relative; overflow:hidden; }
.wm-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.wm-card:nth-child(1){ background:linear-gradient(158deg,#fff 52%, #EAF1FF); }
.wm-card:nth-child(2){ background:linear-gradient(158deg,#fff 52%, #FFF6DD); }
.wm-card:nth-child(3){ background:linear-gradient(158deg,#fff 52%, #E2F5EC); }
.wm-top{ display:flex; gap:14px; align-items:center; }
.wm-top img{ width:56px; height:56px; border-radius:50%; }
.wm-name{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--fg-strong); display:flex; align-items:center; gap:6px; }
.wm-name .ic{ width:15px; height:15px; color:var(--brand-blue-500); }
.wm-deg{ font-size:12.5px; color:var(--oman-500); font-weight:700; font-family:var(--font-display); }
.wm-rating{ display:flex; align-items:center; gap:6px; margin:14px 0 12px; font-family:var(--font-display); font-weight:800; color:var(--fg-strong); font-size:14px; }
.wm-rating .stars{ color:var(--brand-gold-400); display:flex; gap:1px; }
.wm-rating .muted{ color:var(--fg-muted); font-weight:600; font-size:12.5px; }
.wm-bio{ font-size:13px; color:var(--ink-600); line-height:1.5; margin:0 0 14px; }

/* ============================================================
   CASE STUDY / SUCCESS STORY
   ============================================================ */
.case-wrap{ display:grid; grid-template-columns:1.3fr 1fr; background:#fff; border:1px solid var(--warm-line); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-md); }
.case-main{ padding:42px 44px; }
.case-side{ background:linear-gradient(160deg, var(--brand-blue-900), var(--brand-blue-600)); color:#fff; padding:40px 36px; display:flex; flex-direction:column; gap:24px; justify-content:center; }
.case-profile{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.case-profile img{ width:62px; height:62px; border-radius:50%; }
.case-profile .n{ font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--fg-strong); }
.case-profile .r{ font-size:13px; color:var(--oman-500); font-weight:700; font-family:var(--font-display); }
.case-block{ margin-bottom:22px; }
.case-block:last-child{ margin-bottom:0; }
.case-block .lab{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:8px; }
.case-block.challenge .lab{ color:var(--danger-500); }
.case-block.action .lab{ color:var(--brand-blue-600); }
.case-block .lab .ic{ width:16px; height:16px; }
.case-block p{ color:var(--ink-600); font-size:15.5px; line-height:1.7; margin:0; }
.case-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.case-metric{ background:rgba(255,255,255,0.09); border-radius:14px; padding:16px 10px; text-align:center; }
.case-metric b{ display:block; font-family:var(--font-display); font-weight:900; font-size:30px; color:var(--brand-gold-300); line-height:1; }
.case-metric span{ font-size:11.5px; color:rgba(255,255,255,0.78); margin-top:7px; display:block; line-height:1.3; }
.case-quote{ font-family:var(--font-display); font-weight:600; font-size:17px; line-height:1.55; color:#fff; }
.case-quote .qm{ color:var(--brand-gold-300); font-size:32px; font-weight:900; display:block; height:18px; }
.case-label{ display:inline-flex; align-items:center; gap:8px; background:var(--brand-gold-100); color:var(--brand-gold-700); font-family:var(--font-display); font-weight:800; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; padding:5px 12px; border-radius:99px; }
.case-label .ic{ width:15px; height:15px; }
@media (max-width:860px){ .case-wrap{ grid-template-columns:1fr; } }
@media (max-width:600px){ .case-main{ padding:28px 24px; } .case-side{ padding:30px 24px; } }

/* ============================================================
   VISION / MISSION + JOURNEY TIMELINE (About)
   ============================================================ */
.vm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.vm-card{ background:#fff; border:1px solid var(--warm-line); border-radius:var(--radius-2xl); padding:34px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.vm-card:nth-child(1){ background:linear-gradient(158deg,#fff 50%, #E2F5EC); }
.vm-card:nth-child(2){ background:linear-gradient(158deg,#fff 50%, #EDF3FF); }
.vm-card .vm-ic{ width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; background:linear-gradient(140deg,var(--brand-blue-400),var(--oman-500)); color:#fff; }
.vm-card .vm-ic .ic{ width:26px; height:26px; }
.vm-card h3{ font-size:22px; margin:0 0 10px; }
.vm-card p{ color:var(--ink-600); font-size:16px; line-height:1.7; margin:0; }

.journey{ max-width:820px; margin:0 auto; position:relative; }
.journey::before{ content:''; position:absolute; left:23px; top:10px; bottom:10px; width:2px; background:linear-gradient(180deg,var(--brand-gold-400),var(--oman-400)); }
.jrow{ display:flex; gap:22px; padding:14px 0; position:relative; }
.jyear{ flex:none; width:48px; height:48px; border-radius:50%; background:var(--brand-blue-800); color:var(--brand-gold-300); font-family:var(--font-display); font-weight:900; font-size:13px; display:flex; align-items:center; justify-content:center; z-index:1; border:3px solid var(--warm-bg); }
.jrow .jc h3{ font-size:18px; margin:0 0 4px; }
.jrow .jc p{ margin:0; color:var(--ink-600); font-size:15px; line-height:1.6; }
@media (max-width:860px){ .vm-grid{ grid-template-columns:1fr; } }

/* ============================================================
   ARTICLE LAYOUT (blog post — sidebar TOC + CTA)
   ============================================================ */
.article-layout{ display:grid; grid-template-columns:300px 1fr; gap:48px; align-items:start; }
.article-layout .prose{ max-width:none; margin:0; }
.article-aside{ position:sticky; top:90px; display:flex; flex-direction:column; gap:18px; }
.article-aside .toc{ margin-bottom:0; }
.aside-cta{ background:linear-gradient(160deg,var(--brand-blue-900),var(--brand-blue-600)); color:#fff; border-radius:var(--radius-xl); padding:24px; box-shadow:var(--shadow-md); }
.aside-cta h4{ color:#fff; font-family:var(--font-display); font-weight:800; font-size:17px; margin:0 0 6px; letter-spacing:0; text-transform:none; }
.aside-cta p{ color:rgba(255,255,255,0.82); font-size:14px; line-height:1.55; margin:0 0 16px; }
.aside-cta .btn{ width:100%; }
.aside-cta small{ display:block; margin-top:12px; color:var(--brand-gold-300); font-size:12px; font-weight:700; font-family:var(--font-display); text-align:center; }
@media (max-width:860px){ .article-layout{ grid-template-columns:1fr; gap:28px; } .article-aside{ position:static; } }
.wm-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.wm-tags span{ font-size:11px; font-weight:700; font-family:var(--font-display); color:var(--brand-blue-700); background:rgba(42,91,234,0.08); border-radius:99px; padding:4px 10px; }
.wm-stats{ display:flex; border-top:1px solid var(--warm-line); padding-top:14px; margin-bottom:16px; }
.wm-stats .s{ flex:1; text-align:center; }
.wm-stats .s + .s{ border-left:1px solid var(--warm-line); }
.wm-stats .s b{ display:block; font-family:var(--font-display); font-weight:900; color:var(--brand-blue-800); font-size:17px; line-height:1; }
.wm-stats .s span{ font-size:11px; color:var(--fg-muted); }
.wm-card .btn{ width:100%; }
.wm-badge{ position:absolute; top:14px; right:14px; background:var(--brand-gold-100); color:var(--brand-gold-700); font-size:10.5px; font-weight:800; font-family:var(--font-display); padding:3px 9px; border-radius:99px; }

/* ============================================================
   QUALITY PIPELINE — timeline (dark)
   ============================================================ */
.timeline{ max-width:980px; margin:0 auto; }
.tl-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tl-node{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius-xl); padding:24px; position:relative; transition:.25s var(--ease-out); overflow:hidden; }
.tl-node::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg, var(--brand-gold-300), var(--oman-400)); }
.tl-node:hover{ background:rgba(255,255,255,0.09); transform:translateY(-4px); }
.tl-step{ font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand-gold-300); }
.tl-ic{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin:14px 0; background:linear-gradient(140deg, var(--brand-blue-400), var(--oman-500)); color:#fff; }
.tl-ic .ic{ width:24px; height:24px; }
.tl-node h3{ color:#fff; font-size:18px; margin:0 0 6px; }
.tl-node p{ color:rgba(255,255,255,0.72); font-size:14px; margin:0; line-height:1.55; }
.tl-num{ position:absolute; top:16px; right:20px; font-family:var(--font-display); font-weight:900; font-size:40px; line-height:1; color:rgba(255,255,255,0.09); }
.tl-foot{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:28px; color:#fff; font-family:var(--font-display); font-weight:700; font-size:15px; }
.tl-foot .ic{ color:var(--oman-400); }
@media (max-width:1000px){ .tl-track{ grid-template-columns:repeat(2,1fr); } .writer-mini-grid{ grid-template-columns:1fr; } }
@media (max-width:600px){ .tl-track{ grid-template-columns:1fr; } }

/* ============================================================
   PRICING — labels + per-page detail table
   ============================================================ */
.price-card .pfor{ display:inline-block; background:var(--brand-blue-50); color:var(--brand-blue-700); font-family:var(--font-display); font-weight:800; font-size:11px; padding:4px 11px; border-radius:99px; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:2px; }
.price-card.feat .pfor{ background:var(--brand-gold-100); color:var(--brand-gold-700); }
.price-card .pper{ font-size:13px; color:var(--fg-muted); font-weight:600; margin:-8px 0 2px; }
.price-card .pserv-label{ font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-muted); margin-top:4px; }
.price-card .pserv{ display:flex; flex-wrap:wrap; gap:6px; }
.price-card .pserv span{ font-size:11px; font-weight:700; font-family:var(--font-display); color:var(--ink-600); background:var(--ink-50); border-radius:99px; padding:4px 9px; }

.price-table-wrap{ margin-top:44px; background:#fff; border:1px solid var(--warm-line); border-radius:var(--radius-2xl); padding:8px; box-shadow:var(--shadow-md); overflow-x:auto; }
.price-table{ width:100%; border-collapse:collapse; min-width:680px; }
.price-table th, .price-table td{ padding:16px 18px; text-align:center; }
.price-table thead th{ font-family:var(--font-display); font-weight:800; color:var(--brand-blue-800); font-size:13px; border-bottom:2px solid var(--warm-line); }
.price-table thead th small{ display:block; font-weight:600; font-size:11px; color:var(--fg-muted); margin-top:2px; }
.price-table thead th:first-child{ text-align:left; }
.price-table tbody th{ text-align:left; font-family:var(--font-display); font-weight:800; color:var(--fg-strong); font-size:15px; }
.price-table tbody th span{ display:block; font-weight:600; font-size:12px; color:var(--fg-muted); }
.price-table tbody tr + tr td, .price-table tbody tr + tr th{ border-top:1px solid var(--warm-line); }
.price-table td{ font-family:var(--font-display); font-weight:800; color:var(--brand-blue-800); font-size:16px; }
.price-table td small{ display:block; font-weight:600; font-size:11px; color:var(--fg-muted); }
.price-table tbody tr:hover td, .price-table tbody tr:hover th{ background:var(--warm-soft); }
.price-table .col-pop{ background:var(--brand-gold-50); }
.price-table thead .col-pop{ color:var(--brand-gold-700); border-bottom-color:var(--brand-gold-300); }
.price-note{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-top:20px; }
.price-note .pn{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--fg-muted); font-family:var(--font-display); font-weight:600; }
.price-note .pn .ic{ width:17px; height:17px; color:var(--oman-500); }

/* ============================================================
   REVIEWS MARQUEE (auto-scroll, slow)
   ============================================================ */
.rev-head{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; margin-bottom:36px; }
.rev-head .rh-score{ font-family:var(--font-display); font-weight:900; font-size:46px; line-height:1; color:var(--brand-blue-800); }
.rev-head .rh-mid{ display:flex; flex-direction:column; gap:4px; }
.rev-head .rh-stars{ color:var(--brand-gold-400); font-size:20px; letter-spacing:2px; }
.rev-head .rh-sub{ font-size:14px; color:var(--fg-muted); font-family:var(--font-display); font-weight:600; }
.rev-head .rh-div{ width:1px; height:46px; background:var(--warm-line); }
.rev-head .rh-rec b{ font-family:var(--font-display); font-weight:900; font-size:30px; color:var(--oman-500); }
.rev-head .rh-rec span{ display:block; font-size:13px; color:var(--fg-muted); font-weight:600; }

.rev-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.rev-marquee + .rev-marquee{ margin-top:18px; }
.rev-row{ display:flex; gap:18px; width:max-content; animation: marquee 64s linear infinite; }
.rev-row.rtl{ animation-direction: reverse; animation-duration:72s; }
.rev-marquee:hover .rev-row{ animation-play-state:paused; }
.rev-row .tcard{ width:380px; flex:0 0 380px; background:#fff; }
.rev-row .tcard:nth-child(4n+1){ background:linear-gradient(158deg,#fff 50%, #EAF1FF); }
.rev-row .tcard:nth-child(4n+2){ background:linear-gradient(158deg,#fff 50%, #FFF6DD); }
.rev-row .tcard:nth-child(4n+3){ background:linear-gradient(158deg,#fff 50%, #E2F5EC); }
.rev-row .tcard:nth-child(4n){ background:linear-gradient(158deg,#fff 50%, #FBEBE0); }
.rev-row .tcard .q{ font-size:15.5px; }
@media (prefers-reduced-motion: reduce){ .rev-row{ animation:none; } }
@media (max-width:600px){ .rev-row .tcard{ width:300px; flex:0 0 300px; } }