/* ============================================================
   CAR-TER docs — sleek dark-first theme (grid motif + indigo)
   ============================================================ */
:root{
  --bg:#0b0c10; --bg2:#0e1016; --fg:#e9e9ef; --muted:#9aa0ac;
  --line:#23252e; --line2:#2c2f3a;
  --accent:#7c8bff; --accent2:#a78bfa; --accent3:#22d3ee;
  --code:#13151c; --side:#0c0d13; --card:#101219; --cardhi:#151826;
  --grid:rgba(255,255,255,.028); --glow:rgba(124,139,255,.45);
  --shadow:0 8px 30px rgba(0,0,0,.45);
  --fontH:"Schibsted Grotesk",system-ui,sans-serif;
  --fontB:"Source Sans 3","Source Sans Pro",system-ui,sans-serif;
  --fontM:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* warm neutral (sand → stone) light theme, with a warm terracotta accent */
:root[data-theme="light"]{
  --bg:#E4E2D2; --bg2:#D7D5C8; --fg:#2b2a24; --muted:#6b6a60;
  --line:#CAC9BD; --line2:#B1B0A8;
  --accent:#B5673B; --accent2:#A24E37; --accent3:#C99A4B;
  --code:#DEDCCB; --side:#DEDCCB; --card:#F2EFDD; --cardhi:#ECE9D8;
  --grid:rgba(70,68,56,.05); --glow:rgba(181,103,59,.18);
  --shadow:0 10px 30px rgba(80,75,58,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--fontB);font-size:16.5px;line-height:1.68;
  color:var(--fg);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  position:relative;min-height:100vh;
}
/* faint grid backdrop (the app's signature motif) — on every page */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    var(--bg);
  background-size:42px 42px,42px 42px,auto;
}
/* radial accent glows — landing page only */
body.home::before{
  background:
    radial-gradient(1200px 700px at 78% -8%, var(--glow), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, color-mix(in srgb,var(--accent2) 16%,transparent), transparent 55%),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    var(--bg);
  background-size:auto,auto,42px 42px,42px 42px,auto;
}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}

.layout{display:flex;align-items:flex-start;max-width:1320px;margin:0 auto}

/* ---- sidebar ---- */
.side{
  position:sticky;top:0;height:100vh;overflow-y:auto;width:286px;flex:0 0 286px;
  padding:1.35rem 1rem 3rem;background:linear-gradient(180deg,var(--side),transparent 40%);
  border-right:1px solid var(--line);backdrop-filter:blur(6px);
}
.side::-webkit-scrollbar{width:8px}
.side::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--fg);margin:.1rem .4rem 1.2rem}
.brand .mark{width:38px;height:38px;flex:0 0 38px;display:block}
.brand .mark img{width:100%;height:100%;border-radius:10px;display:block;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.brand .mark .ic-light{display:none}.brand .mark .ic-dark{display:block}
:root[data-theme="light"] .brand .mark .ic-light{display:block}
:root[data-theme="light"] .brand .mark .ic-dark{display:none}
.brand .bt{font-family:var(--fontH);font-weight:700;font-size:1.08rem;letter-spacing:.02em;line-height:1.05}
.brand .bs{display:block;font-family:var(--fontM);font-size:.62rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.navsec{font-family:var(--fontM);font-size:.66rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin:1.25rem .5rem .4rem;font-weight:600}
/* ---- sidebar search ---- */
.search{position:relative;margin:0 .35rem 1rem}
.search .sicon{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);font-size:.8rem;opacity:.6;pointer-events:none}
.search input{width:100%;padding:.5rem 2rem .5rem 1.85rem;border-radius:10px;border:1px solid var(--line2);
  background:var(--card);color:var(--fg);font-family:var(--fontB);font-size:.9rem;outline:none;transition:border-color .15s,box-shadow .15s}
.search input::placeholder{color:var(--muted)}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.search kbd{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font-family:var(--fontM);font-size:.7rem;
  color:var(--muted);background:var(--cardhi);border:1px solid var(--line2);border-radius:5px;padding:.05rem .35rem;pointer-events:none}
.search input:focus~kbd{display:none}
.searchres{position:absolute;left:0;right:0;top:calc(100% + .4rem);z-index:40;max-height:60vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);padding:.35rem}
.searchres a{display:block;padding:.45rem .55rem;border-radius:8px;text-decoration:none;color:var(--fg)}
.searchres a:hover,.searchres a.sel{background:var(--cardhi)}
.searchres .r-t{font-family:var(--fontH);font-weight:600;font-size:.9rem;display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}
.searchres .r-s{font-family:var(--fontM);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);flex:0 0 auto}
.searchres .r-x{font-size:.78rem;color:var(--muted);line-height:1.4;margin-top:.15rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.searchres mark{background:color-mix(in srgb,var(--accent) 28%,transparent);color:inherit;border-radius:3px;padding:0 .1em}
.searchres .r-none{padding:.6rem .55rem;color:var(--muted);font-size:.85rem}
.side ul{list-style:none;margin:0;padding:0}
.side li a{display:block;padding:.3rem .6rem;border-radius:8px;color:var(--muted);text-decoration:none;font-size:.92rem;border:1px solid transparent;transition:color .15s,background .15s,border-color .15s}
.side li a:hover{background:var(--cardhi);color:var(--fg)}
.side li a.active{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent2) 13%,transparent));color:var(--fg);border-color:color-mix(in srgb,var(--accent) 38%,transparent);font-weight:600}

/* ---- main column ---- */
main{flex:1 1 auto;min-width:0;max-width:840px;padding:2.6rem 3rem 5rem;margin:0 auto}
article{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
article h1{font-family:var(--fontH);font-size:2.3rem;font-weight:700;margin:.1rem 0 1rem;line-height:1.12;letter-spacing:-.01em}
article h2{font-family:var(--fontH);font-size:1.5rem;font-weight:600;margin:2.4rem 0 .7rem;padding-top:1.1rem;border-top:1px solid var(--line)}
article h3{font-family:var(--fontH);font-size:1.18rem;font-weight:600;margin:1.5rem 0 .4rem}
article p{color:var(--fg)}
a{color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);text-underline-offset:2px}
a:hover{color:var(--accent2)}
.wikibroken{color:var(--muted);border-bottom:1px dotted var(--muted);cursor:help}
strong{color:var(--fg);font-weight:700}
hr{border:none;border-top:1px solid var(--line);margin:2rem 0}

code{font-family:var(--fontM);font-size:.85em;background:var(--code);padding:.14em .4em;border-radius:5px;border:1px solid var(--line)}
pre{background:linear-gradient(180deg,var(--code),var(--bg2));padding:1.1rem 1.2rem;border-radius:12px;overflow-x:auto;border:1px solid var(--line);box-shadow:var(--shadow)}
pre code{background:none;padding:0;border:none;font-size:.84rem;line-height:1.6}
pre::-webkit-scrollbar{height:8px}
pre::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}

table{border-collapse:separate;border-spacing:0;width:100%;margin:1.2rem 0;font-size:.92rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{padding:.55rem .8rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
th{background:var(--cardhi);font-family:var(--fontH);font-weight:600;font-size:.86rem}
tbody tr:hover{background:var(--cardhi)}

blockquote{margin:1.2rem 0;padding:.7rem 1.1rem;border-left:3px solid var(--accent);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent);color:var(--muted);border-radius:0 10px 10px 0}
img{max-width:100%;border-radius:10px}
.mermaid{margin:1.4rem 0;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem}
footer{margin-top:3.5rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
footer a{color:var(--muted)}footer a:hover{color:var(--accent)}

/* ---- top controls (theme toggle) ---- */
#themetoggle{position:fixed;top:1rem;right:1.1rem;z-index:30;width:2.5rem;height:2.5rem;border-radius:10px;
  background:var(--card);border:1px solid var(--line2);color:var(--fg);cursor:pointer;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .15s}
#themetoggle:hover{transform:translateY(-1px)}
#navtoggle{display:none;position:fixed;top:1rem;left:1rem;z-index:30;font-size:1.3rem;background:var(--card);border:1px solid var(--line2);border-radius:10px;width:2.5rem;height:2.5rem;color:var(--fg);cursor:pointer}

@media(max-width:980px){
  #navtoggle{display:block}
  .side{position:fixed;z-index:25;left:0;top:0;transform:translateX(-100%);transition:transform .25s ease;width:300px;background:var(--side)}
  .side.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.5)}
  main{padding:4rem 1.3rem 4rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   Animated control background — little working controls that
   drift across the canvas on one shared keyframe (driftAcross)
   while each runs its own internal animation loop.
   ============================================================ */
.bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;filter:blur(3.5px);opacity:.55}
/* a slot is a fixed anchor point; its stacked cards cross-fade so the slot
   appears to "switch" between different controls in place */
.slot{position:absolute;transform:translate(-50%,-50%) scale(var(--s,1.6))}
.fxc{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:.5rem;
  padding:.5rem .68rem;border-radius:13px;background:var(--card);border:1px solid var(--line2);
  box-shadow:var(--shadow);font-family:var(--fontM);font-size:.58rem;letter-spacing:.04em;color:var(--muted);
  white-space:nowrap;opacity:0;will-change:opacity,transform;
  animation:swap var(--cyc,21s) ease-in-out var(--ph,0s) infinite}
.fxc .tag{text-transform:lowercase}
@keyframes swap{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}
  5%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  37%{opacity:0;transform:translate(-50%,-50%) scale(.9)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}
}

/* gauge: sweeping arc + needle in lockstep */
.fx-gauge svg{width:54px;height:30px;display:block;overflow:visible}
.fx-gauge .trk{fill:none;stroke:var(--line2);stroke-width:4.5;stroke-linecap:round}
.fx-gauge .val{fill:none;stroke:var(--c,#7c8bff);stroke-width:4.5;stroke-linecap:round;
  stroke-dasharray:75.4;animation:gsweep 3.4s ease-in-out infinite}
.fx-gauge .ndl{stroke:var(--fg);stroke-width:2;stroke-linecap:round;transform-origin:30px 30px;animation:gndl 3.4s ease-in-out infinite}
.fx-gauge .hub{fill:var(--fg)}
@keyframes gsweep{0%,100%{stroke-dashoffset:75.4}50%{stroke-dashoffset:14}}
@keyframes gndl{0%,100%{transform:rotate(-86deg)}50%{transform:rotate(48deg)}}

/* toggle: knob slides, track lights up */
.fx-tog{width:38px;height:22px;border-radius:12px;background:var(--line2);position:relative;animation:togbg 2.8s ease-in-out infinite}
.fx-tog::after{content:"";position:absolute;top:2.5px;left:2.5px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.4);animation:togknob 2.8s ease-in-out infinite}
@keyframes togbg{0%,45%{background:var(--line2)}55%,100%{background:var(--c,#7c8bff)}}
@keyframes togknob{0%,45%{transform:translateX(0)}55%,100%{transform:translateX(16px)}}

/* slider: thumb glides along a filling track */
.fx-sld{width:50px;height:6px;border-radius:6px;background:var(--line2);position:relative}
.fx-sld i{position:absolute;left:0;top:50%;width:14px;height:14px;border-radius:50%;background:var(--c,#7c8bff);
  box-shadow:0 0 0 3px var(--card),0 1px 3px rgba(0,0,0,.4);transform:translate(-50%,-50%);animation:sldmove 3.1s ease-in-out infinite}
.fx-sld::before{content:"";position:absolute;left:0;top:0;height:100%;border-radius:6px;background:var(--c,#7c8bff);animation:sldfill 3.1s ease-in-out infinite}
@keyframes sldmove{0%,100%{left:8%}50%{left:92%}}
@keyframes sldfill{0%,100%{width:8%}50%{width:92%}}

/* progress ring: stroke fills around */
.fx-ring svg{width:30px;height:30px;display:block;transform:rotate(-90deg)}
.fx-ring .trk{fill:none;stroke:var(--line2);stroke-width:4}
.fx-ring .val{fill:none;stroke:var(--c,#7c8bff);stroke-width:4;stroke-linecap:round;stroke-dasharray:88;animation:ringfill 3.6s ease-in-out infinite}
@keyframes ringfill{0%{stroke-dashoffset:88}55%,75%{stroke-dashoffset:8}100%{stroke-dashoffset:88}}

/* sparkline: line draws, dot rides the crest */
.fx-spk svg{width:58px;height:26px;display:block;overflow:visible}
.fx-spk polyline{fill:none;stroke:var(--c,#22d3ee);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:120;animation:spkdraw 3.8s ease-in-out infinite}
.fx-spk .dot{fill:var(--c,#22d3ee);animation:spkdot 3.8s ease-in-out infinite}
@keyframes spkdraw{0%{stroke-dashoffset:120}60%,100%{stroke-dashoffset:0}}
@keyframes spkdot{0%{opacity:0}55%{opacity:0}65%,100%{opacity:1}}

/* status light: cycles green→amber→red with a soft pulse */
.fx-stat{width:14px;height:14px;border-radius:50%;background:#36d399;animation:statcol 4.2s steps(1,end) infinite,statpulse 1.4s ease-in-out infinite}
@keyframes statcol{0%{background:#36d399;box-shadow:0 0 10px #36d39988}33%{background:#fbbf24;box-shadow:0 0 10px #fbbf2488}66%{background:#f87171;box-shadow:0 0 10px #f8717188}}
@keyframes statpulse{0%,100%{transform:scale(.9);opacity:.8}50%{transform:scale(1.1);opacity:1}}

/* stepper: value ticks up and down */
.fx-step{display:flex;align-items:center;gap:.3rem;color:var(--fg)}
.fx-step b{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;border-radius:5px;background:var(--cardhi);border:1px solid var(--line2);font-size:.7rem;line-height:1;color:var(--c,#7c8bff)}
.fx-step .n{min-width:1.1em;text-align:center;font-size:.74rem}

/* segmented: highlight slides across three cells */
.fx-seg{display:flex;width:62px;height:20px;padding:2px;border-radius:8px;background:var(--line2);position:relative}
.fx-seg b{flex:1;z-index:1}
.fx-seg::after{content:"";position:absolute;top:2px;left:2px;width:calc((100% - 4px)/3);height:calc(100% - 4px);
  border-radius:6px;background:var(--c,#7c8bff);animation:segmove 4.2s ease-in-out infinite}
@keyframes segmove{0%,10%{transform:translateX(0)}33%,43%{transform:translateX(100%)}66%,76%{transform:translateX(200%)}100%{transform:translateX(0)}}

/* progress bar: linear fill */
.fx-bar{width:54px;height:8px;border-radius:6px;background:var(--line2);overflow:hidden;position:relative}
.fx-bar i{position:absolute;left:0;top:0;height:100%;border-radius:6px;background:var(--c,#7c8bff);animation:barfill 3.2s ease-in-out infinite}
@keyframes barfill{0%{width:6%}55%{width:92%}100%{width:6%}}

/* joystick: knob orbits the pad */
.fx-joy{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 38%,var(--cardhi),var(--line2));border:1px solid var(--line2);position:relative}
.fx-joy i{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:var(--c,#7c8bff);box-shadow:0 1px 3px rgba(0,0,0,.45);animation:joymove 4.4s ease-in-out infinite}
@keyframes joymove{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(-50%,-50%) translate(7px,-7px)}50%{transform:translate(-50%,-50%) translate(-8px,3px)}75%{transform:translate(-50%,-50%) translate(5px,7px)}}

/* button: presses on a loop */
.fx-btn{padding:.3rem .62rem;border-radius:8px;background:var(--c,#7c8bff);color:#fff;font-size:.58rem;font-family:var(--fontH);font-weight:600;letter-spacing:.06em;box-shadow:0 4px 12px rgba(0,0,0,.28);animation:btnpress 2.4s ease-in-out infinite}
@keyframes btnpress{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(.9);filter:brightness(1.18)}}

/* colorPicker: swatches pop in turn */
.fx-swatch{display:flex;gap:5px;align-items:center}
.fx-swatch s{width:11px;height:11px;border-radius:50%;display:block;animation:swpop 4s ease-in-out infinite}
.fx-swatch s:nth-child(2){animation-delay:.8s}.fx-swatch s:nth-child(3){animation-delay:1.6s}
.fx-swatch s:nth-child(4){animation-delay:2.4s}.fx-swatch s:nth-child(5){animation-delay:3.2s}
@keyframes swpop{0%,100%{transform:scale(.8);opacity:.55}9%,18%{transform:scale(1.35);opacity:1}}

/* ============================================================
   Landing / hero
   ============================================================ */
.hero{position:relative;max-width:1080px;margin:0 auto;padding:5.5rem 1.5rem 2rem;text-align:center}
.hero .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fontM);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);border-radius:30px;padding:.35rem .85rem;background:var(--card)}
.hero .eyebrow .pip{width:7px;height:7px;border-radius:50%;background:#36d399;box-shadow:0 0 8px #36d399;animation:statpulse 1.6s ease-in-out infinite}
.hero h1{font-family:var(--fontH);font-size:clamp(2.6rem,6.5vw,4.6rem);line-height:1.04;font-weight:700;letter-spacing:-.02em;margin:1.3rem 0 .6rem}
.hero h1 .grad{background:linear-gradient(110deg,var(--accent),var(--accent2) 45%,var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{max-width:620px;margin:0 auto;font-size:1.18rem;color:var(--muted);line-height:1.6}
.hero .cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin:2rem 0 .5rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fontH);font-weight:600;font-size:.98rem;
  padding:.72rem 1.3rem;border-radius:11px;text-decoration:none;border:1px solid transparent;transition:transform .15s,box-shadow .15s}
.btn.primary{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 38%,transparent)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 52%,transparent);color:#fff}
.btn.ghost{color:var(--fg);background:var(--card);border-color:var(--line2)}
.btn.ghost:hover{transform:translateY(-2px);border-color:var(--accent)}

/* live showcase strip: bigger working controls, on the hero */
.showcase{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin:3rem auto 0;max-width:920px}
.show{display:flex;flex-direction:column;align-items:center;gap:.6rem;min-width:120px;padding:1.1rem 1.2rem;
  border-radius:16px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);
  animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.show:nth-child(2){animation-delay:.06s}.show:nth-child(3){animation-delay:.12s}
.show:nth-child(4){animation-delay:.18s}.show:nth-child(5){animation-delay:.24s}
.show:nth-child(6){animation-delay:.30s}.show:nth-child(7){animation-delay:.36s}
.show:nth-child(8){animation-delay:.42s}
.show .nm{font-family:var(--fontM);font-size:.66rem;letter-spacing:.08em;text-transform:lowercase;color:var(--muted)}
.show .fx-gauge svg,.show .fx-spk svg{width:74px}
.show .fx-spk svg{height:34px}.show .fx-gauge svg{height:42px}
.show .fx-ring svg{width:42px;height:42px}
.show .fx-tog{transform:scale(1.25)}.show .fx-sld{width:72px}
.show .fx-stat{width:18px;height:18px}
.show .fx-seg{width:78px;height:24px}.show .fx-bar{width:74px}
.show .fx-joy{width:42px;height:42px}.show .fx-swatch s{width:13px;height:13px}
.show .fx-btn{font-size:.66rem;padding:.34rem .7rem}.show .fx-step{font-size:.8rem}

/* feature cards grid */
.wrap{max-width:1080px;margin:0 auto;padding:1rem 1.5rem 1rem}
.sectlabel{font-family:var(--fontM);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin:3.5rem 0 .2rem}
.secttitle{font-family:var(--fontH);font-size:1.9rem;font-weight:700;text-align:center;margin:.2rem 0 2rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
.card{display:block;text-decoration:none;color:inherit;padding:1.3rem 1.35rem;border-radius:16px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .18s,border-color .18s}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card .ic{font-size:1.5rem;margin-bottom:.5rem}
.card h3{font-family:var(--fontH);font-size:1.1rem;margin:.1rem 0 .35rem;color:var(--fg)}
.card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}
.homefoot{text-align:center;color:var(--muted);font-size:.85rem;padding:3.5rem 1.5rem 4rem}
.homefoot a{color:var(--muted)}.homefoot a:hover{color:var(--accent)}
@media(max-width:980px){.home .side{display:none}.home #navtoggle{display:none}}