/* Rookoot homepage — "Ocean" look.
   White page, deep navy text, ocean blue as the accent,
   with bright supporting colours for a lively, "happening" feel.
   Loaded LAST on index.html only, so it takes over from premium.css and
   home.css. Look and layout only: nothing here changes how the page works.
   */

:root {
  --navy: #0B1734;
  --navy2: #16285A;
  --brand: #1A3EBF;            /* white text on it: about 8:1 */
  --brand-dark: #122C8C;       /* blue text on white: about 11:1 */
  --brand-soft: #EAF0FF;
  --brand-grad: linear-gradient(100deg, #1A3EBF 0%, #3462E6 55%, #3462E6 100%);
  --sun: #FFB627; --sun-soft: #FFF5DC;
  --teal: #0E9F9A; --teal-soft: #E1F7F5;
  --violet: #7C4DFF; --violet-soft: #EFEAFF;
  --orange: #FF7A2F; --orange-soft: #FFF0E6;
  --sky: #2E8BFF; --sky-soft: #E6F1FF;

  /* Re-point the older tokens so every existing rule follows the new palette. */
  --ink: var(--navy);
  --paper: #FFFFFF;
  --muted: #55607A;
  --line: #E7E9F0;
  --accent: var(--brand-dark);
  --accent-dark: var(--brand-dark);
  --accent-soft: var(--brand-soft);
  --accent2: var(--teal);
  --accent2-dark: #0B7F7B;
  --day-jade: var(--brand);
  --day-jade-2: var(--brand);
  --day-cream: #FFFFFF;
  --day-mint: #FFFFFF;
  --copper: var(--brand);
  --copper-light: #8FB0FF;
  --copper-dark: var(--brand-dark);
  --copper-grad: var(--brand-grad);
  --copper-text: var(--brand-grad);
  --jade: var(--navy);
  --jade2: var(--navy2);
  --jade-ink: #070F24;
  --gold: var(--sun);
  --gold-light: #FFD27A;
  --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 12px 30px -16px rgba(11,23,52,0.28);
  --shadow-lg: 0 34px 70px -30px rgba(11,23,52,0.45);
}

body { background: #fff; color: var(--navy); font-family: var(--body); }

/* ---------- Lettering: bold, modern, friendly ---------- */
.hero h1, .h2, .logo, .bx h3, .tier h3, .category-title, .stats b, .quote, .facts b, .live-head, .door b, .mono, .marq span {
  font-family: var(--display);
}
.hero h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; color: var(--navy); }
.hero h1 em { font-style: normal; font-weight: 800; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.h2 { font-weight: 800; letter-spacing: -0.03em; color: var(--navy); }
.h2 em { font-style: normal; font-weight: 800; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bx h3, .tier h3 { font-weight: 800; letter-spacing: -0.02em; }
.category-title { font-weight: 800; letter-spacing: -0.02em; }
.stats b { font-weight: 800; letter-spacing: -0.03em; color: var(--navy); }
.live-head { font-weight: 800; letter-spacing: -0.02em; }
.door b { font-weight: 700; letter-spacing: -0.01em; }
.quote { font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.quote em { font-style: normal; }
.logo { font-weight: 800; letter-spacing: -0.6px; color: var(--navy); }
.logo em { color: var(--brand); }
.eyebrow { color: var(--brand-dark); }

/* ---------- Announcement + header ---------- */
.ann { background: var(--brand-grad); }
.ann a[href]::after { color: #fff; }
header#siteHeader { background: rgba(255,255,255,0.9); border-bottom: 1px solid var(--line); color: var(--navy); }
header#siteHeader.scrolled { box-shadow: 0 10px 30px -18px rgba(11,23,52,0.35); }
header .links > a, header .dd > button { color: #3A4565; }
header .links > a:hover, header .dd > button:hover, header .dd.open > button { background: var(--brand-soft); color: var(--brand-dark); }
header .btn-outline, header .btn-soft { border: 1.5px solid var(--navy); color: var(--navy); background: #fff; }
.mi:hover { background: var(--brand-soft); }
.mi .ic { background: var(--brand-soft); }
.mi span:not(.ic) { color: var(--muted); }
.mnav { background: #fff; }
.mnav .grp { color: var(--brand-dark); }
.mnav a.row { border-color: var(--line); color: var(--navy); }
.lang-sw { border-color: var(--line); background: #fff; }
.lang-sw button { color: var(--muted); }
.lang-sw button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.burger { border-color: var(--line); }

/* ---------- Buttons: blue is the "go" colour ---------- */
.btn-accent, .btn-white, .install-banner .install-btn, .hero-card .order {
  background: var(--brand); color: #fff;
  box-shadow: 0 14px 28px -14px rgba(26,62,191,0.75), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-accent:hover, .btn-white:hover { background: var(--brand-dark); filter: none; }
.btn-outline { border: 1.5px solid var(--navy); color: var(--navy); background: #fff; }
.btn-outline:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-ghost { background: #fff; border: 1.5px solid var(--navy); color: var(--navy); }

/* ---------- Hero: white, bright colour glows, the blue motif ---------- */
.hero {
  color: var(--navy);
  background:
    radial-gradient(520px 360px at 100% 0%, rgba(52,98,230,0.20), transparent 65%),
    radial-gradient(460px 320px at 0% 8%, rgba(255,182,39,0.20), transparent 65%),
    radial-gradient(520px 360px at 30% 105%, rgba(14,159,154,0.12), transparent 65%),
    #fff;
}
.hero::after { background-image: radial-gradient(rgba(11,23,52,0.07) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.hero p.sub { color: #46506B; }
.pill { background: #fff; border: 1px solid #CFDCFF; color: var(--brand-dark); box-shadow: 0 6px 16px -10px rgba(26,62,191,0.5); }
.hero-grid { position: relative; z-index: 1; }

/* The two big doors get lively colour tiles. */
.door { background: #fff; border: 1px solid var(--line); color: var(--navy); box-shadow: 0 16px 34px -22px rgba(11,23,52,0.35); }
.door:hover { border-color: var(--brand); transform: translateY(-3px); }
.door small { color: var(--muted); }
.door .ic { background: var(--brand-grad); box-shadow: 0 10px 20px -10px rgba(26,62,191,0.7); }
.door + .door .ic { background: linear-gradient(135deg, #FFB627, #FF7A2F); box-shadow: 0 10px 20px -10px rgba(255,122,47,0.7); }
.door .go { color: var(--brand); }

.hero-search input { border: 1.5px solid var(--line); box-shadow: 0 18px 40px -24px rgba(11,23,52,0.4); color: var(--navy); }
.hero-search input:focus { outline: 3px solid rgba(26,62,191,0.35); border-color: var(--brand); }

/* Category chips: each its own bright colour. */
.hero .chip { border: 1px solid transparent; color: var(--navy); font-weight: 700; transition: transform .15s, box-shadow .2s; }
.hero .chip:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(11,23,52,0.5); }
.hero .chip[href="#cat-food"] { background: var(--brand-soft); }
.hero .chip[href="#cat-services"] { background: var(--sky-soft); }
.hero .chip[href="#cat-home_based"] { background: var(--sun-soft); }
.hero .chip[href="#cat-retail"] { background: var(--violet-soft); }
.hero .chip[href="#cat-books"] { background: var(--teal-soft); }
.hero .chip[href="#cat-health_beauty"] { background: var(--orange-soft); }
.stats span { color: var(--muted); }
.stats > div:nth-child(1) b { color: var(--brand); }

/* Live board */
.live { background: linear-gradient(90deg, #1A3EBF, #FF7A2F, #FFB627, #0E9F9A, #7C4DFF) top / 100% 6px no-repeat, #fff; border: 1px solid var(--line); box-shadow: 0 44px 90px -40px rgba(11,23,52,0.5); }
.live-sec { border-color: var(--line); }
.live-sec h3 { color: var(--brand-dark); }
.live-row:hover { background: var(--brand-soft); }
.lic { background: var(--brand-soft); }
.ltx small, .live-empty { color: var(--muted); }
.live-empty a, .live-more { color: var(--brand-dark); }

/* ---------- Marquee: a bright blue ribbon ---------- */
.marq { background: var(--brand-grad); border: 0; padding: 16px 0; }
.marq span { color: #fff; font-style: normal; font-weight: 800; letter-spacing: -0.01em; }
.marq span::after { content: "✦"; color: #FFE08A; font-size: 14px; }

/* ---------- What you can do (bento) ---------- */
.bx { border-color: var(--line); box-shadow: 0 24px 44px -34px rgba(11,23,52,0.45); }
.bx:hover { border-color: rgba(26,62,191,0.45); box-shadow: 0 34px 56px -32px rgba(11,23,52,0.45); }
.bx p { color: #46506B; }
.bic { background: var(--brand-grad); box-shadow: 0 12px 22px -12px rgba(26,62,191,0.7); }
.bento .bx:nth-child(2) .bic { background: linear-gradient(135deg, #FFB627, #FF7A2F); box-shadow: 0 12px 22px -12px rgba(255,122,47,0.7); }
.bento .bx:nth-child(3) .bic { background: linear-gradient(135deg, #2E8BFF, #7C4DFF); box-shadow: 0 12px 22px -12px rgba(46,139,255,0.7); }
.bento .bx:nth-child(4) .bic { background: linear-gradient(135deg, #0B1734, #16285A); }
.bento .bx:nth-child(5) .bic { background: linear-gradient(135deg, #0E9F9A, #2ED1B5); box-shadow: 0 12px 22px -12px rgba(14,159,154,0.7); }
.bento .bx:nth-child(1) { --glow: rgba(52,98,230,.22) !important; }
.bento .bx:nth-child(2) { --glow: rgba(255,182,39,.26) !important; }
.bento .bx:nth-child(3) { --glow: rgba(46,139,255,.18) !important; }
.bento .bx:nth-child(4) { --glow: rgba(26,62,191,.16) !important; }
.bento .bx:nth-child(5) { --glow: rgba(14,159,154,.2) !important; }
.bx-go { color: var(--brand-dark); }

/* ---------- Directory ---------- */
.category-count { background: #F1F2F6; color: var(--muted); }
.category-count.active { background: var(--brand-soft); color: var(--brand-dark); }
.bubble-square { border-color: var(--line); box-shadow: 0 16px 30px -20px rgba(11,23,52,0.4); }
.bubble-square.placeholder { border: 1.5px dashed #CFDCFF; background: var(--brand-soft); }
.bubble-square.placeholder .plus { background: #fff; color: var(--brand); }
.bubble-square.placeholder .ph { color: var(--brand-dark); }
a.bubble:hover .bubble-square.placeholder { border-color: var(--brand); }
.bubble-square.dynamic { background: var(--brand-soft); }
.bubble-square.dynamic .dynamic-note { color: var(--brand-dark); }
.bubble-square.promo, .bubble-square.promo.promo-courier { background: linear-gradient(135deg, #0B1734, #1A3EBF); }
.bubble-label { color: var(--navy); }
.bubble-sub { color: var(--muted); }
.bubble-sub.promo-sub, .bubble-sub.cta-sub { color: var(--brand-dark); }
.sponsor-banner { background: linear-gradient(90deg, #FFF5DC, #EAF0FF); border-color: #FFD27A; border-left-color: var(--sun); }
.sponsor-banner .sponsor-label { color: #8A5A00; }

/* "Be the first" card that replaces rows of empty boxes. */
.soon { max-width: 1152px; margin: 34px auto 0; padding: 0 24px; }
.soon-card { position: relative; overflow: hidden; border-radius: 26px; padding: 26px; background: radial-gradient(420px 220px at 100% 0%, rgba(255,182,39,0.22), transparent 65%), radial-gradient(420px 240px at 0% 100%, rgba(52,98,230,0.16), transparent 65%), #fff; border: 1.5px dashed #CFDCFF; }
.soon-card h3 { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--navy); }
.soon-card p { color: var(--muted); font-size: 14.5px; margin-top: 6px; max-width: 560px; }
.soon-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; }
.soon-cats span { scroll-margin-top: 90px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 13.5px; font-weight: 700; color: var(--navy); }
.soon-cats span small { font-size: 11px; font-weight: 700; color: var(--brand-dark); margin-left: 6px; }

/* ---------- Earn band / for business ---------- */
.earn-box { background: radial-gradient(500px 300px at 100% 0%, rgba(255,182,39,0.22), transparent 60%), linear-gradient(160deg, #EAF0FF, #fff); border: 1px solid #CFDCFF; color: var(--navy); }
.earn-box .eyebrow { color: var(--brand-dark); }
.biz { background: radial-gradient(700px 360px at 100% 0%, rgba(52,98,230,0.10), transparent 60%), #F7F8FB; color: var(--navy); border-color: var(--line); }
.biz .eyebrow { color: var(--brand-dark); }
.biz .lead, .step span { color: #46506B; }
.tier { background: #fff; border: 1px solid var(--line); color: var(--navy); box-shadow: 0 22px 40px -32px rgba(11,23,52,0.4); }
.tier .ico { background: var(--brand-soft); }
.tier .for { color: var(--brand-dark); }
.tier li { color: #46506B; }
.tier li::before { color: var(--teal); }
.tier .btn-outline { border-color: var(--navy); color: var(--navy); }
.tier .badge.free { background: var(--teal); color: #fff; }
.tier.pro { background: linear-gradient(160deg, #0B1734, #16285A); color: #fff; border: 0; box-shadow: 0 34px 60px -30px rgba(11,23,52,0.7); }
.tier.pro h3 { color: #fff; }
.tier.pro .ico { background: rgba(255,255,255,0.1); }
.tier.pro .for { color: #8FB0FF; }
.tier.pro li { color: rgba(255,255,255,0.82); }
.tier.pro li::before { color: #FFD27A; }
.tier .badge { background: var(--brand-grad); color: #fff; }
.step .n { background: var(--brand-grad); color: #fff; }

/* ---------- Founder story: soft blue ---------- */
.sec.paper { background: linear-gradient(180deg, #EAF0FF, #FFFFFF); }
.portrait { background: radial-gradient(360px 260px at 100% 0%, rgba(52,98,230,0.45), transparent 60%), radial-gradient(300px 220px at 0% 100%, rgba(255,182,39,0.3), transparent 60%), linear-gradient(160deg, #16285A, #0B1734); }
.mono { background: var(--brand-grad); color: #fff; }
.story-p { color: #46506B; }
.sig { color: var(--brand-dark); }
.facts div { border-color: var(--line); }
.facts span { color: var(--muted); }

/* ---------- FAQ ---------- */
.faq summary::after { color: var(--brand); }
.faq details { border-color: var(--line); }
.faq a { color: var(--brand-dark); }

/* ---------- Contact panel: the one navy panel ---------- */
.cta { background: radial-gradient(520px 280px at 50% -10%, rgba(52,98,230,0.42), transparent 70%), radial-gradient(420px 240px at 100% 100%, rgba(255,182,39,0.18), transparent 70%), linear-gradient(180deg, #16285A, #0B1734); }
.cta .eyebrow { color: #8FB0FF; }
.eq input:focus, .eq textarea:focus { border-color: #8FB0FF; box-shadow: 0 0 0 4px rgba(52,98,230,0.25); }
.cta .btn-ghost { background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.35); color: #fff; }
.eq-note a, footer .copy a { color: #8FB0FF; }

/* ---------- Footer: navy anchor ---------- */
footer { background: #0B1734; color: rgba(255,255,255,0.7); }
footer .logo { color: #fff; }
footer .logo em { color: #8FB0FF; }
.fgrid h4 { color: #8FB0FF; }

/* ---------- Phone bar ---------- */
.sticky-cta { background: rgba(255,255,255,0.94); border-color: var(--line); }

/* ---------- Phones ---------- */
@media (max-width: 960px) {
      }
@media (max-width: 640px) {
  .soon { padding: 0 16px; }
  .soon-card { padding: 22px 18px; }
}

/* ---------- New hero: big headline, moving word, photo collage ---------- */
.hero.hero2 { padding: 40px 0 64px; }
.h2grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "title col" "find col" "live live"; gap: 26px 48px; align-items: center; }
.h2-title { grid-area: title; }
.h2-col { grid-area: col; }
.h2-find { grid-area: find; }
.h2grid .live { grid-area: live; width: 100%; max-width: 760px; justify-self: center; margin-top: 18px; }
.hero2 .h2-title { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7.4vw, 92px); line-height: .95; letter-spacing: -0.05em; color: var(--navy); margin: 0; }
.rot { display: inline-block; position: relative; z-index: 0; color: var(--brand); transition: opacity .25s, transform .25s; }
.rot::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .06em; height: .3em; background: #FFC93C; border-radius: 6px; transform: rotate(-1.5deg); z-index: -1; }
.rot.out { opacity: 0; transform: translateY(.25em); }

.collage { position: relative; height: 330px; max-width: 520px; margin: 0 auto; }
.cl { position: absolute; width: 230px; height: 230px; border-radius: 26px; border: 6px solid #fff; overflow: hidden; box-shadow: 0 30px 50px -22px rgba(11,23,52,0.55); text-decoration: none; transition: transform .25s; background: #EEF1F8; }
.cl img { width: 100%; height: 100%; object-fit: cover; }
.cl .cl-name { position: absolute; left: 8px; right: 8px; bottom: 8px; background: rgba(11,23,52,0.72); color: #fff; font: 700 12px var(--body); padding: 5px 9px; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl.a { left: 0; top: 70px; transform: rotate(-7deg); }
.cl.b { left: calc(50% - 115px); top: 0; transform: rotate(3deg); z-index: 2; }
.cl.c { right: 0; top: 92px; transform: rotate(8deg); }
.cl:hover { transform: rotate(0) translateY(-6px) scale(1.03); z-index: 4; }
.cl.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; }
.cl.tile .ti { font-size: 62px; line-height: 1; }
.cl.tile small { font: 800 14px var(--body); text-align: center; padding: 0 10px; }
.t-blue { background: linear-gradient(150deg, #3462E6, #1A3EBF) !important; }
.t-sun { background: linear-gradient(150deg, #FFC93C, #FF8A1F) !important; }
.t-sun small { color: #0B1734; }
.t-teal { background: linear-gradient(150deg, #2ED1B5, #0E9F9A) !important; }
.cl-tag { position: absolute; z-index: 5; font: 800 13px var(--body); padding: 8px 13px; border-radius: 999px; box-shadow: 0 12px 24px -10px rgba(11,23,52,0.55); white-space: nowrap; }
.cl-tag.t1 { left: 4px; top: 318px; background: var(--brand); color: #fff; }
.cl-tag.t2 { right: 26px; top: 40px; background: #FFC93C; color: #0B1734; }

.bigsearch { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: 8px 8px 8px 18px; box-shadow: 0 26px 50px -30px rgba(11,23,52,0.55); max-width: 580px; }
.bigsearch:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(26,62,191,0.15), 0 26px 50px -30px rgba(11,23,52,0.55); }
.bigsearch .icon { font-size: 17px; }
.bigsearch input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 500 16.5px var(--body); color: var(--navy); padding: 10px 0; }
.bigsearch button { border: 0; cursor: pointer; background: var(--brand); color: #fff; font: 800 15px var(--body); padding: 14px 20px; border-radius: 14px; box-shadow: 0 12px 24px -12px rgba(26,62,191,0.8); }
.bigsearch button:hover { background: var(--brand-dark); }
.h2-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.h2-links a { font: 800 14.5px var(--body); color: var(--navy); background: #F1F4FF; padding: 11px 16px; border-radius: 999px; text-decoration: none; transition: transform .15s, box-shadow .2s; }
.h2-links a:first-child { background: #FFF5DC; }
.h2-links a:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(11,23,52,0.5); }

@media (max-width: 960px) {
  .h2grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "col" "find" "live"; gap: 22px; }
  .hero.hero2 { padding: 28px 0 52px; }
  .hero2 .h2-title { font-size: clamp(46px, 12.5vw, 72px); }
  .collage { height: 236px; max-width: 400px; width: 100%; }
  .cl { width: 156px; height: 156px; border-width: 5px; border-radius: 22px; }
  .cl.a { top: 40px; }
  .cl.b { left: calc(50% - 78px); }
  .cl.c { top: 52px; }
  .cl.tile .ti { font-size: 46px; }
  .cl.tile small { font-size: 12.5px; }
  .cl-tag { font-size: 12px; padding: 7px 11px; }
  .cl-tag.t1 { left: 10px; top: 196px; }
  .cl-tag.t2 { right: 8px; top: 10px; }
  .h2grid .live { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .rot, .cl { transition: none; } }