/* ===========================================================================
   DogarZada website, inner-page skin (October 2026).

   WHY A SKIN AND NOT THIRTY REWRITES

   The courses, services, contact, blog, legal and account pages were all
   built on one pattern: a blue gradient hero, white cards, a tinted call to
   action band, and their own copy of the same few classes (.hero, .head,
   .kick, .card, .btn, .cta-band, .chip). This file is linked after each
   page's own <style>, so it restyles those shared classes into the inbox
   app's language (navy command panel heroes, frosted cards, pill buttons)
   without touching any page's markup, forms or scripts.

   If a page needs something different, its own rule wins as long as it is
   more specific; nothing here uses !important except where an inline style
   on many pages would otherwise beat it.
   =========================================================================== */

:root{--navy-1:#07102A;--navy-2:#0B1D4A;--navy-3:#12327F;--line-2:#D5DFF0;--royal-2:#3B82F6;--royal-3:#93B4FB}
body{-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{letter-spacing:-.022em}

/* ---------- Heroes: the app's navy command panel ---------- */
.hero,.head{position:relative;overflow:hidden;
  background:
    radial-gradient(700px 340px at 85% 0%,rgba(91,133,240,.35),transparent 60%),
    radial-gradient(600px 300px at 0% 100%,rgba(29,78,216,.35),transparent 60%),
    linear-gradient(135deg,var(--navy-1) 0%,var(--navy-2) 55%,var(--navy-3) 100%)}
.hero::before,.head::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(141,171,247,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(141,171,247,.09) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 75%)}
.hero::after,.head::after{content:"";position:absolute;width:460px;height:460px;right:-160px;top:-200px;border-radius:50%;background:rgba(59,130,246,.22);filter:blur(70px);pointer-events:none;z-index:0}
.hero>*,.head>*{position:relative;z-index:1}
.hero h1,.head h1{font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.03em}
.hero p,.hero .sub,.hero .lead,.head .meta{color:rgba(255,255,255,.72)}

/* The orange label pill becomes the app's glass chip with a live dot. */
.kick,.free-badge,.hero .kick,.head .kick{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.9);font-weight:600;font-size:12.5px;letter-spacing:.02em;text-transform:none;padding:6px 14px;border-radius:999px}
.kick::before,.free-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--flame,#F97316);box-shadow:0 0 8px rgba(249,115,22,.8)}
.cat-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.stats-line b{font-weight:700}

/* ---------- Buttons: pills ---------- */
.btn{border-radius:999px}
.btn-royal{box-shadow:0 10px 26px -8px rgba(29,78,216,.55)}
.btn-wa{color:#05361A}

/* ---------- Cards: frosted, with the blue hairline on top ---------- */
.card,.tool-card,.sc,.cc,.step,.rel,.learn,.enroll-card{border-color:var(--line-2);box-shadow:0 1px 2px rgba(16,33,74,.04),0 8px 22px -14px rgba(29,78,216,.18)}
.card,.tool-card,.enroll-card{position:relative;border-radius:20px}
.card::before,.tool-card::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,.55),transparent)}
.tool-card{box-shadow:0 30px 70px -30px rgba(10,23,51,.35)}
.sc,.cc,.rel{border-radius:18px}
.sc:hover,.cc:hover,.rel:hover{box-shadow:0 2px 8px -2px rgba(16,33,74,.10),0 18px 40px -22px rgba(29,78,216,.34);border-color:#BFD0F0}
.chip{border-radius:999px}
.chip.active{background:var(--ink,#0F172A);border-color:var(--ink,#0F172A)}
.search input{border-radius:999px;border-color:var(--line-2)}
.step .n{background:linear-gradient(135deg,var(--royal-2),var(--royal,#1D4ED8));color:#fff;border-radius:50%}

/* ---------- Dark "anything" panel uses the command panel too ---------- */
.anything{background:linear-gradient(135deg,var(--navy-1),var(--navy-2) 60%,var(--navy-3));box-shadow:0 30px 70px -30px rgba(10,23,51,.45);border-radius:24px}

/* ---------- Call to action band: a navy panel, inset ---------- */
.cta-band{position:relative;overflow:hidden;border:0;color:#fff;width:min(1180px,calc(100% - 32px));margin:24px auto 72px;border-radius:28px;padding:clamp(40px,6vw,64px) clamp(22px,5vw,56px);
  background:radial-gradient(600px 300px at 85% 0%,rgba(91,133,240,.35),transparent 60%),linear-gradient(135deg,var(--navy-1),var(--navy-2) 55%,var(--navy-3));box-shadow:0 30px 70px -30px rgba(10,23,51,.45)}
.cta-band h2{color:#fff;font-weight:700}
.cta-band p{color:rgba(255,255,255,.72)}
.cta-band .btn-royal{background:#fff;color:#0F172A;box-shadow:0 0 0 1px rgba(59,130,246,.25),0 10px 30px -8px rgba(59,130,246,.5)}
.cta-band .btn-royal:hover{background:#EFF6FF}

/* Blog posts: the end-of-article box */
article .cta,.cta{position:relative;border:0;color:#fff;border-radius:22px;
  background:radial-gradient(500px 240px at 90% 0%,rgba(91,133,240,.35),transparent 60%),linear-gradient(135deg,var(--navy-1),var(--navy-2) 60%,var(--navy-3))}
.cta b{color:#fff}
.cta p{color:rgba(255,255,255,.72)}
.cta .btn{background:#fff;color:#0F172A;border-radius:999px}
.cta .btn:hover{background:#EFF6FF}
article blockquote{border-left-color:var(--royal-2);background:linear-gradient(90deg,#EFF6FF,#F7FAFF)}

/* Legal pages: section nav pills */
.legal-nav a{border-radius:999px}

/* Forms: softer, rounder fields everywhere */
input:not([type=checkbox]):not([type=radio]),select,textarea{border-color:var(--line-2)}

@media(prefers-reduced-motion:reduce){.sc,.cc,.rel{transition:none}}

/* ---------- Account pages ---------- */
/* The left panel on login and signup becomes the command panel. */
.panel{background:radial-gradient(600px 320px at 100% 0%,rgba(91,133,240,.35),transparent 60%),linear-gradient(150deg,var(--navy-1) 0%,var(--navy-2) 55%,var(--navy-3) 100%)}
.panel::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(141,171,247,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(141,171,247,.09) 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:radial-gradient(ellipse at 60% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 60% 30%,#000 20%,transparent 75%)}
.panel::after{background:rgba(59,130,246,.25);filter:blur(60px)}
.panel>*{position:relative;z-index:1}
.panel p.lead{color:rgba(255,255,255,.72)}
.panel .promise{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);border-radius:16px}
/* On those two pages the form card is not a box; no hairline or shadow. */
.formside .card{border:0;box-shadow:none;background:none}
.formside .card::before{display:none}
/* Account forms: the main button is a pill too. */
.formside .btn,.card form .btn{border-radius:999px}