/* =========================================================
   ORTIQA — Home system (shared)
   Theme-agnostic structure. Each page sets the palette in
   a small :root block (--bg, --ink, --brand, --on-brand …).
   ========================================================= */


/* ---- Theme fallbacks · ink on paper + olive (overridden per page) ---- */
:root{
  /* ---- ORTIQAE palette (Meadow / Mustard cream / Peach / Outerspace / Crimson) ---- */
  --bg:        #EFEADF;     /* warm ecru paper — original */
  --surface:   #FBF8F1;     /* warm white card on paper */
  --ink:       #1C1B16;     /* dark forest near-black ink */
  --body:      #595F4E;     /* warm green-grey body text */
  --muted:     #8A8A6F;     /* muted khaki — mono labels */
  --brand:     #4A553C;     /* MEADOW GREEN — primary */
  --brand-2:   #3C5A38;     /* deeper meadow (hover) */
  --brand-soft:#D7E0BE;     /* light green tint bg */
  --marker:    #C6D072;     /* LIGHT GREEN highlighter swipe */
  --on-brand:  #F4ECCF;     /* cream text on green */
  --dark:      #15281B;     /* dark green band */
  --dark-2:    #0C2113;     /* deeper night-green */
  /* named palette roles (each a meaning / share of the site) */
  --peach:     #F1D2A1;     /* PEACH — soft warm accent / tints */
  --olive:     #76813B;     /* mid olive (the peach-band field) */
  --steel:     #2B4C59;     /* OUTERSPACE blue — profile / personal sections */
  --crimson:   #531210;     /* CRIMSON oxblood — manifesto + hero eyebrow ONLY */
  --lime:      #B2BD47;     /* bright chartreuse — sparing emphasis */
  --line:      rgba(23,35,26,.16);
  --line-2:    rgba(23,35,26,.08);
  --shadow-sm: 0 1px 2px rgba(20,30,18,.05), 0 2px 6px rgba(20,30,18,.05);
  --shadow:    0 18px 48px -22px rgba(20,30,18,.28), 0 4px 14px -8px rgba(20,30,18,.18);
  --shadow-lg: 0 40px 90px -40px rgba(20,30,18,.36);
  --r:    22px;
  --r-sm: 14px;
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Space Grotesk Variable", -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono Variable", ui-monospace, Menlo, monospace;
  --container: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* paper grain — same paper as the LinkedIn doc */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:160px 160px;
  opacity:1;mix-blend-mode:normal;
}
/* faint warm vignette so the paper feels lit, not flat */
body::after{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, color-mix(in oklab, var(--surface) 60%, transparent), transparent 60%);
}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.wrap{max-width:var(--container);margin:0 auto;padding:0 28px}
@media (max-width:640px){ .wrap{padding:0 20px} }

h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:600;letter-spacing:-0.02em;line-height:1.04;text-wrap:balance}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-2);background:var(--brand-soft);
  padding:8px 14px;border-radius:999px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.lead{font-size:clamp(18px,2.1vw,21px);line-height:1.55;color:var(--body);max-width:54ch;text-wrap:pretty}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:15.5px;letter-spacing:-0.01em;
  padding:14px 24px;border-radius:999px;
  transition:transform .25s var(--ease), background .2s, box-shadow .25s, color .2s, border-color .2s;
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none}
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:0 10px 24px -10px color-mix(in oklab, var(--brand) 70%, transparent)}
.btn-primary:hover{background:var(--brand-2);transform:translateY(-2px);box-shadow:0 16px 30px -12px color-mix(in oklab, var(--brand) 70%, transparent)}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s, box-shadow .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:color-mix(in oklab, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);
}
.nav-inner{max-width:var(--container);margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:-0.03em;color:var(--ink)}
.brand .bdot{width:9px;height:9px;border-radius:50%;background:var(--brand);margin-top:6px}
.switch{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line-2);padding:4px;border-radius:999px;box-shadow:var(--shadow-sm)}
.switch a{font-size:13.5px;font-weight:500;color:var(--body);padding:8px 15px;border-radius:999px;transition:color .2s, background .2s}
.switch a:hover{color:var(--ink)}
.switch a.active{background:var(--ink);color:var(--bg)}
.nav-cta{display:flex;align-items:center;gap:10px}
@media (max-width:900px){ .switch{display:none} }
@media (max-width:560px){ .nav-cta .btn-ghost{display:none} }

/* vertical pages: minimal nav (logo + back + title + cta) */
.nav-back{display:flex;align-items:center;gap:18px}
.nav-back .back{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.nav-back .back:hover{color:var(--ink)}
.nav-vtitle{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.nav-vtitle .vd{width:8px;height:8px;border-radius:50%;background:var(--brand)}
@media (max-width:680px){ .nav-vtitle{display:none} .nav-back .back span{display:none} }

/* ---------- Hero ---------- */
.hero{position:relative;padding:148px 0 80px}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 70% at 85% 8%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 70%);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(42px,5.6vw,80px);margin:22px 0 0}
.hero h1 .hl{position:relative;color:var(--ink);white-space:nowrap}
.hero h1 .hl::after{
  content:"";position:absolute;left:-1.5%;right:-1.5%;top:.12em;bottom:.06em;z-index:-1;
  background:var(--marker);
  border-radius:.7em .35em .6em .4em / .9em .6em .8em .5em;
  transform:rotate(-.7deg) scaleX(0);transform-origin:left;
  animation:markerIn 1s var(--ease) .5s forwards;mix-blend-mode:multiply;
}
@keyframes markerIn{to{transform:rotate(-.7deg) scaleX(1)}}
.hero .lead{margin-top:26px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-trust{display:flex;align-items:center;gap:14px;margin-top:30px;color:var(--muted);font-size:14px}
.hero-trust .avs{display:flex}
.hero-trust .avs span{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--bg);margin-left:-10px;background:var(--brand-soft);display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:14px;color:var(--brand-2)}
.hero-trust .avs span:first-child{margin-left:0}
.hero-trust b{color:var(--ink)}
@media (max-width:880px){
  .hero{padding:128px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-art{order:2}
}

/* ---------- Hero art / product cards ---------- */
.card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow)}
.art{position:relative}
.art .float{position:absolute;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;display:flex;align-items:center;gap:12px}
.art .float .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-2);flex:none}
.art .float .ic svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none}
.art .float .t{font-size:12.5px;color:var(--muted);line-height:1.3}
.art .float .v{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:18px}
.float-anim{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* product panel inside hero */
.panel{padding:26px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.panel-head .badge{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2);background:var(--brand-soft);padding:6px 11px;border-radius:999px}
.panel-head .dots{display:flex;gap:6px}
.panel-head .dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.field{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:13px 15px;background:var(--bg)}
.field svg{width:18px;height:18px;stroke:var(--muted);stroke-width:1.8;fill:none;flex:none}
.field .ph{color:var(--ink);font-weight:500;font-size:15px}
.field .cursor{width:1.5px;height:18px;background:var(--brand);animation:blink 1.1s step-end infinite;margin-left:-3px}
@keyframes blink{50%{opacity:0}}

/* ---------- Sections ---------- */
.section{padding:clamp(76px,9vw,124px) 0;position:relative}
.section-head{max-width:680px;margin-bottom:54px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(30px,3.6vw,48px);margin-top:16px}
.section-head .lead{margin-top:18px}
.section-head.center .lead{margin-left:auto;margin-right:auto}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.step{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:30px;transition:transform .35s var(--ease), box-shadow .35s}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--brand-2)}
.step .ic{width:54px;height:54px;border-radius:15px;background:var(--brand-soft);color:var(--brand-2);display:grid;place-items:center;margin:14px 0 20px}
.step .ic svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.6;fill:none}
.step h3{font-size:22px;margin-bottom:9px}
.step p{font-size:15.5px}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }

/* feature rows */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature + .feature{margin-top:96px}
.feature.flip .feat-media{order:2}
.feat-media{position:relative;border-radius:var(--r);overflow:hidden;min-height:340px;background:var(--brand-soft);border:1px solid var(--line-2)}
.feat-media image-slot{width:100%;height:100%;min-height:340px;display:block}
.feature h3{font-size:clamp(26px,3vw,36px);margin:16px 0 14px}
.feature .feat-list{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:13px}
.feature .feat-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--body)}
.feature .feat-list .tick{flex:none;width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand-2);display:grid;place-items:center;margin-top:1px}
.feature .feat-list .tick svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none}
@media (max-width:820px){
  .feature{grid-template-columns:1fr;gap:30px}
  .feature.flip .feat-media{order:0}
}

/* offer cards (agency) */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.offer{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;transition:transform .35s var(--ease), box-shadow .35s, border-color .3s;position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.offer:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--line)}
.offer:hover::before{transform:scaleX(1)}
.offer .tag{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--brand-2)}
.offer h3{font-size:25px;margin:12px 0 4px}
.offer .dur{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.offer p{font-size:15.5px;flex:1}
.offer .more{margin-top:22px;font-weight:600;color:var(--ink);font-size:14.5px;display:inline-flex;align-items:center;gap:7px}
.offer .more svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .25s var(--ease)}
.offer:hover .more svg{transform:translateX(4px)}
@media (max-width:820px){ .offers{grid-template-columns:1fr} }

/* stats band */
.band{background:linear-gradient(155deg, var(--dark, var(--ink)), var(--dark-2, var(--ink)));color:var(--bg);border-radius:calc(var(--r) + 8px);padding:clamp(40px,5vw,64px);position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:180%;background:radial-gradient(circle, color-mix(in oklab, var(--brand) 55%, transparent), transparent 65%);opacity:.55}
.band .band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative;z-index:1}
.band .stat .num{font-family:var(--serif);font-weight:600;font-size:clamp(40px,5vw,60px);line-height:1;color:#fff}
.band .stat .num .u{font-family:var(--sans);font-size:.42em;font-weight:600;color:var(--brand);margin-left:2px}
.band .stat .lbl{margin-top:12px;font-size:14.5px;color:color-mix(in oklab, var(--bg) 72%, transparent);line-height:1.4}
@media (max-width:820px){ .band .band-grid{grid-template-columns:1fr 1fr;gap:28px} }

/* quote */
.quote{max-width:920px;margin:0 auto;text-align:center}
.quote blockquote{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,40px);line-height:1.24;color:var(--ink);letter-spacing:-0.02em;text-wrap:balance}
.quote blockquote .mk{color:var(--brand)}
.quote .by{margin-top:28px;display:flex;align-items:center;justify-content:center;gap:14px}
.quote .by .ph{width:48px;height:48px;border-radius:50%;background:var(--brand-soft);overflow:hidden}
.quote .by .meta{text-align:left}
.quote .by .meta b{color:var(--ink);font-weight:600;display:block}
.quote .by .meta span{font-size:14px;color:var(--muted)}

/* FAQ */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 4px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--serif);font-weight:600;font-size:clamp(18px,2.2vw,23px);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);transition:background .3s, border-color .3s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:1.8px;background:var(--ink);border-radius:2px;transform:translate(-50%,-50%);transition:transform .3s var(--ease), background .3s}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .pm{background:var(--brand);border-color:var(--brand)}
.faq details[open] summary .pm::before,.faq details[open] summary .pm::after{background:var(--on-brand)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq .ans{padding:0 4px 26px;font-size:16px;color:var(--body);max-width:64ch;animation:reveal .4s var(--ease)}
@keyframes reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* CTA band */
.cta{background:var(--brand);color:var(--on-brand);border-radius:calc(var(--r) + 8px);padding:clamp(48px,6vw,80px);text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 50% -20%, rgba(255,255,255,.25), transparent 60%)}
.cta > *{position:relative;z-index:1}
.cta h2{color:var(--on-brand);font-size:clamp(30px,4.4vw,54px)}
.cta p{color:color-mix(in oklab, var(--on-brand) 78%, transparent);font-size:19px;margin:16px auto 0;max-width:48ch}
.cta .btn-dark{margin-top:32px;background:var(--ink);color:var(--bg)}
.cta .btn-dark:hover{background:#000}

/* footer */
.footer{padding:80px 0 40px;color:var(--body)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:48px;border-bottom:1px solid var(--line)}
.footer .brand{margin-bottom:16px}
.footer .desc{font-size:15px;max-width:34ch}
.footer h4{font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer ul a{font-size:15px;transition:color .2s}
.footer ul a:hover{color:var(--ink)}
.footer-bottom{padding-top:26px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.02em}
.footer-bottom .worlds{display:flex;gap:8px}
.footer-bottom .worlds a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;transition:border-color .2s, color .2s}
.footer-bottom .worlds a:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;gap:30px} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr} }

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .float-anim{animation:none}
  .hero h1 .hl::after{animation:none;transform:scaleX(1)}
}