/* ==========================================================================
   NarneTech.Social — Conceptual Sketch (anti-polish / raw aesthetic)
   Light = a working sheet of paper. Dark = a blueprint on the wall.
   Printed structure, handwritten annotations.
   ========================================================================== */

:root {
    /* ---- light: paper ---- */
    --paper: #FAFAF8;
    --paper-2: #F3F1EB;
    --paper-3: #EAE7DE;

    --ink: #1A1A1A;
    --pencil: #45443F;
    --pencil-soft: #5C5A52;

    --rule: rgba(26, 26, 26, 0.16);
    --rule-soft: rgba(26, 26, 26, 0.09);
    --grid: rgba(26, 26, 26, 0.055);

    --kraft: #A9793F;
    /* Kraft is fine as a stroke, but fails 4.5:1 as text on paper. */
    --kraft-text: #8A5F2B;
    --kraft-fill: #E8D4B4;
    --red-pen: #B23A2B;
    --red-fill: rgba(178, 58, 43, 0.10);
    --blue-pen: #2B4C7E;
    --blue-fill: rgba(43, 76, 126, 0.10);
    --green-pen: #3F6B45;
    --green-fill: rgba(63, 107, 69, 0.12);
    --marker: rgba(255, 212, 0, 0.42);

    /* Six marker colours — the coloured pens on the desk. Every one of these
       is a text-weight tone, verified against paper at 4.5:1 or better. */
    --m1: #B23A2B;  --m1-fill: #F8DDD8;
    --m2: #8A5709;  --m2-fill: #FAEACB;
    --m3: #0B6E62;  --m3-fill: #CDEBE5;
    --m4: #6236B0;  --m4-fill: #E5DBFA;
    --m5: #2B4C7E;  --m5-fill: #D8E3F5;
    --m6: #3F6B45;  --m6-fill: #DAECDB;

    /* Glow is a dark-theme device only. */
    --glow-text: none;
    --glow-soft: none;
    --glow-strong: none;

    /* Buttons invert against the sheet, so contrast is never in question. */
    --btn-bg: #1A1A1A;
    --btn-fg: #FAFAF8;
    /* Flag text: white works on the deep light-mode red, but not on the neon
       pink the dark theme uses (white/#FF4FB0 is only 3.0:1). */
    --flag-fg: #FFFFFF;

    --shadow-hard: 4px 4px 0 var(--ink);
    --shadow-soft: 3px 3px 0 var(--rule);

    --font-display: "Archivo", "Arial Black", sans-serif;
    --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
    --font-hand: "Kalam", "Comic Sans MS", cursive;

    --shell: 1180px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);

    /* Hand-drawn box corners — irregular on purpose. */
    --rough-a: 255px 15px 225px 15px / 15px 225px 15px 255px;
    --rough-b: 15px 225px 15px 255px / 255px 15px 225px 15px;
    --rough-c: 200px 20px 180px 25px / 20px 190px 22px 210px;

    --snap: 140ms;
    --ease: cubic-bezier(0.2, 0, 0.1, 1);

    --nav-h: 80px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #0A0912;
        --paper-2: #120F1E;
        --paper-3: #1A1629;

        --ink: #F3EEFF;
        --pencil: #C7BCE4;
        --pencil-soft: #A599C6;

        --rule: rgba(192, 139, 255, 0.32);
        --rule-soft: rgba(192, 139, 255, 0.18);
        --grid: rgba(192, 139, 255, 0.085);

        --kraft: #FFC24D;
        --kraft-text: #FFC24D;
        --kraft-fill: rgba(255, 194, 77, 0.16);
        --red-pen: #FF4FB0;
        --red-fill: rgba(255, 79, 176, 0.16);
        --blue-pen: #38E5FF;
        --blue-fill: rgba(56, 229, 255, 0.16);
        --green-pen: #9BE95C;
        --green-fill: rgba(155, 233, 92, 0.16);
        --marker: rgba(255, 79, 176, 0.30);

        /* The same six pens, re-lit as neon tubes. */
        --m1: #FF4FB0;  --m1-fill: rgba(255, 79, 176, 0.16);
        --m2: #FFC24D;  --m2-fill: rgba(255, 194, 77, 0.16);
        --m3: #38E5FF;  --m3-fill: rgba(56, 229, 255, 0.16);
        --m4: #C08BFF;  --m4-fill: rgba(192, 139, 255, 0.18);
        --m5: #6EA8FF;  --m5-fill: rgba(110, 168, 255, 0.16);
        --m6: #9BE95C;  --m6-fill: rgba(155, 233, 92, 0.16);

        --glow-text: 0 0 14px currentColor;
        --glow-soft: 0 0 16px rgba(56, 229, 255, 0.30);
        --glow-strong: 0 0 26px rgba(56, 229, 255, 0.50);

        --btn-bg: #38E5FF;
        --btn-fg: #06131A;
        --flag-fg: #14061C;

        --shadow-hard: 4px 4px 0 rgba(56, 229, 255, 0.55), 0 0 24px rgba(56, 229, 255, 0.28);
        --shadow-soft: 3px 3px 0 rgba(192, 139, 255, 0.40);
    }
}

:root[data-theme="dark"] {
    --paper: #0A0912;
    --paper-2: #120F1E;
    --paper-3: #1A1629;

    --ink: #F3EEFF;
    --pencil: #C7BCE4;
    --pencil-soft: #A599C6;

    --rule: rgba(192, 139, 255, 0.32);
    --rule-soft: rgba(192, 139, 255, 0.18);
    --grid: rgba(192, 139, 255, 0.085);

    --kraft: #FFC24D;
    --kraft-text: #FFC24D;
    --kraft-fill: rgba(255, 194, 77, 0.16);
    --red-pen: #FF4FB0;
    --red-fill: rgba(255, 79, 176, 0.16);
    --blue-pen: #38E5FF;
    --blue-fill: rgba(56, 229, 255, 0.16);
    --green-pen: #9BE95C;
    --green-fill: rgba(155, 233, 92, 0.16);
    --marker: rgba(255, 79, 176, 0.30);

    /* The same six pens, re-lit as neon tubes. */
    --m1: #FF4FB0;  --m1-fill: rgba(255, 79, 176, 0.16);
    --m2: #FFC24D;  --m2-fill: rgba(255, 194, 77, 0.16);
    --m3: #38E5FF;  --m3-fill: rgba(56, 229, 255, 0.16);
    --m4: #C08BFF;  --m4-fill: rgba(192, 139, 255, 0.18);
    --m5: #6EA8FF;  --m5-fill: rgba(110, 168, 255, 0.16);
    --m6: #9BE95C;  --m6-fill: rgba(155, 233, 92, 0.16);

    --glow-text: 0 0 14px currentColor;
    --glow-soft: 0 0 16px rgba(56, 229, 255, 0.30);
    --glow-strong: 0 0 26px rgba(56, 229, 255, 0.50);

    --btn-bg: #38E5FF;
    --btn-fg: #06131A;
    --flag-fg: #14061C;

    --shadow-hard: 4px 4px 0 rgba(56, 229, 255, 0.55), 0 0 24px rgba(56, 229, 255, 0.28);
    --shadow-soft: 3px 3px 0 rgba(192, 139, 255, 0.40);
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 24px);
    overflow-x: clip;
}

body {
    margin: 0;
    background-color: var(--paper);
    /* graph paper */
    background-image:
        linear-gradient(to right, var(--grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
    background-size: 26px 26px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 3px solid var(--red-pen);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--marker); color: var(--ink); }

.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% -120%;
    z-index: 200;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.7rem 1.2rem;
    transition: translate var(--snap) var(--ease);
}

.skip-link:focus-visible { translate: -50% 0; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- layout --- */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--wide { max-width: 1320px; }

.section { padding-block: clamp(3.5rem, 7vw, 6rem); position: relative; }

/* A torn-off band of a different stock. */
.section--band {
    background-color: var(--paper-2);
    border-block: 2px solid var(--ink);
}

/* Sticky-note tape strip. */
.tape {
    position: absolute;
    top: -11px;
    left: 22px;
    width: 74px;
    height: 22px;
    background: var(--kraft-fill);
    border: 1px solid var(--kraft);
    transform: rotate(-3deg);
    opacity: 0.9;
}

.tape--right { left: auto; right: 22px; transform: rotate(2.5deg); }

/* Margin note in the designer's own handwriting. */
.note {
    font-family: var(--font-hand);
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--pencil);
    transform: rotate(-1.4deg);
}

@keyframes draw { to { stroke-dashoffset: 0; } }

/* Rough underline under a heading. */
.rough-rule { display: block; width: 130px; height: 9px; margin-top: 0.9rem; color: var(--kraft); }
.rough-rule path { stroke-dasharray: 300; stroke-dashoffset: 300; }
.is-in .rough-rule path, .rough-rule.is-in path { animation: draw 0.8s var(--ease) 0.2s forwards; }

/* --------------------------------------------------- type components ---- */

.eyebrow {
    font-family: var(--font-hand);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--red-pen);
    margin-bottom: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transform: rotate(-0.8deg);
}

.h-display {
    font-size: clamp(2.5rem, 6.4vw, 4.6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.02;
    text-transform: uppercase;
}

.h-section {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    text-transform: uppercase;
}

.lede {
    font-size: clamp(1.02rem, 1.25vw, 1.15rem);
    color: var(--pencil);
    line-height: 1.72;
    max-width: 62ch;
    text-wrap: pretty;
}

/* Small caps label, like a drawing callout. */
.stencil {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pencil-soft);
}

/* ------------------------------------------------------------ buttons --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border: 2px solid var(--ink);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    white-space: nowrap;
    background: transparent;
    color: var(--ink);
    border-radius: var(--rough-b);
    transition: transform var(--snap) var(--ease), box-shadow var(--snap) var(--ease),
                background-color var(--snap) var(--ease), color var(--snap) var(--ease);
    box-shadow: var(--shadow-soft);
}

.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

.btn--primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-soft); }
.btn--primary:hover { box-shadow: var(--shadow-hard); }

.btn--ghost { background: var(--paper); }
.btn--lg { padding: 1rem 1.9rem; font-size: 1rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.btn__arrow { display: inline-block; transition: transform var(--snap) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* --------------------------------------------------------------- nav ---- */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    transition: background-color var(--snap) var(--ease), border-color var(--snap) var(--ease);
}

.nav.is-stuck { background: var(--paper); border-bottom-color: var(--ink); }

.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; width: 100%; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    letter-spacing: -0.025em;
    color: var(--ink);
    white-space: nowrap;
    /* Brand rule: never uppercased, and never broken by a space.
       The wordmark is one flex item so the container gap cannot land
       between "NarneTech" and ".Social". */
    text-transform: none;
}

.brand__word { display: inline; }

.brand__mark {
    width: clamp(38px, 3.4vw, 44px);
    height: clamp(38px, 3.4vw, 44px);
    flex: none;
    border: 2.5px solid var(--ink);
    border-radius: var(--rough-c);
    display: grid;
    place-items: center;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 800;
    background: var(--kraft-fill);
    transition: transform var(--snap) var(--ease);
}

.brand:hover .brand__mark { transform: rotate(-6deg); }
.brand__dot { color: var(--red-pen); }

.nav__links { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }

.nav__link {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--pencil);
    padding: 0.45rem 0.75rem;
    position: relative;
    transition: color var(--snap) var(--ease);
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 0.75rem; right: 0.75rem; bottom: 0.25rem;
    height: 2px;
    background: var(--red-pen);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--snap) var(--ease);
}

.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 0.6rem; }

.theme-toggle {
    width: 42px; height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border: 2px solid var(--ink);
    border-radius: var(--rough-c);
    background: var(--paper);
    cursor: pointer;
    color: var(--ink);
    position: relative;
    transition: transform var(--snap) var(--ease), background-color var(--snap) var(--ease);
}

.theme-toggle:hover { transform: rotate(-8deg); background: var(--kraft-fill); }
.theme-toggle svg { position: absolute; transition: opacity var(--snap) var(--ease), transform var(--snap) var(--ease); }
.theme-toggle .icon-sun { opacity: 0; transform: scale(0.5) rotate(-90deg); }
.theme-toggle .icon-moon { opacity: 1; }

:root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: scale(0.5) rotate(90deg); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun { opacity: 1; transform: none; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { opacity: 0; transform: scale(0.5) rotate(90deg); }
}

.nav__toggle {
    display: none;
    width: 42px; height: 42px;
    border: 2px solid var(--ink);
    border-radius: var(--rough-c);
    background: var(--paper);
    cursor: pointer;
    padding: 0;
    place-items: center;
}

.nav__toggle span { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform var(--snap) var(--ease), opacity var(--snap) var(--ease); }
.nav__toggle span + span { margin-top: 4px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
    .nav__toggle { display: grid; }

    .nav__menu {
        position: fixed;
        inset: var(--nav-h) 0 auto 0;
        background: var(--paper);
        border-bottom: 2px solid var(--ink);
        padding: 1.25rem var(--gutter) 1.75rem;
        display: grid;
        gap: 0.25rem;
        clip-path: inset(0 0 100% 0);
        visibility: hidden;
        transition: clip-path 220ms var(--ease), visibility 0s linear 220ms;
        pointer-events: none;
    }

    .nav__menu.is-open {
        clip-path: inset(0 0 0 0);
        visibility: visible;
        pointer-events: auto;
        transition: clip-path 220ms var(--ease), visibility 0s linear 0s;
    }

    .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__link { font-size: 1.125rem; padding: 0.85rem 0; border-bottom: 1px dashed var(--rule); }
    .nav__link::after { display: none; }
    .nav__menu .nav__actions { margin-top: 1.25rem; flex-direction: column; align-items: stretch; }
    .nav__menu .btn { width: 100%; }
    .nav__actions--desktop .btn { display: none; }
}

@media (min-width: 981px) {
    .nav__menu { display: flex; align-items: center; gap: 1.5rem; }
    .nav__menu .nav__actions { display: none; }
}

/* ------------------------------------------------------------ reveals --- */

[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
    transition-delay: var(--delay, 0ms);
}

[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ------------------------------------------------------------- footer --- */

.footer { border-top: 2px solid var(--ink); background: var(--paper-2); padding-block: clamp(3rem, 6vw, 4rem) 2rem; }

.footer__grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.footer__pitch { color: var(--pencil); font-size: 0.9375rem; max-width: 34ch; margin-top: 1rem; }

.footer__col h2 { font-family: var(--font-hand); font-size: 1.125rem; font-weight: 700; color: var(--red-pen); margin-bottom: 0.9rem; text-transform: none; letter-spacing: 0; }

.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer__list a { font-size: 0.9375rem; color: var(--pencil); border-bottom: 1px solid transparent; transition: border-color var(--snap) var(--ease), color var(--snap) var(--ease); }
.footer__list a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.footer__base {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 1.5rem;
    border-top: 1px dashed var(--rule);
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    justify-content: space-between; align-items: center;
    color: var(--pencil-soft); font-size: 0.8125rem;
}

@media (max-width: 820px) {
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__brandcol { grid-column: 1 / -1; }
}

@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------- reduced motion ----- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    [data-reveal] { opacity: 1; transform: none; }
    .rough-rule path { stroke-dashoffset: 0; }
}

/* ---------------------------------------------------- forced colors ----- */

@media (forced-colors: active) {
    .sketch, .btn, .nav__toggle, .theme-toggle { border-color: CanvasText; }
    .tape { display: none; }
}

/* ==========================================================================
   Neon layer — active only in the dark theme.
   --glow-* resolve to `none` in light, so these rules are inert there.
   ========================================================================== */

.eyebrow,
.brand__dot,
.hero__stamp,
.plan__seats,
.soon__status,
.toggle__save { text-shadow: var(--glow-text); }

.brand__mark,
.mod__icon,
.why__icon,
.day__dot,
.line__box,
.theme-toggle { box-shadow: var(--glow-soft); }

.btn--primary { box-shadow: var(--shadow-soft), var(--glow-soft); }
.btn--primary:hover { box-shadow: var(--shadow-hard), var(--glow-strong); }

.plan__flag { box-shadow: var(--glow-soft); }

/* Neon tube tint on the drawn marks. */
.rough-rule,
.hero__arrow,
.desk__arrow,
.sheet__scribble { filter: drop-shadow(0 0 0 transparent); }

:root[data-theme="dark"] .rough-rule,
:root[data-theme="dark"] .hero__arrow,
:root[data-theme="dark"] .desk__arrow,
:root[data-theme="dark"] .sheet__scribble { filter: drop-shadow(0 0 6px currentColor); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .rough-rule,
    :root:not([data-theme="light"]) .hero__arrow,
    :root:not([data-theme="light"]) .desk__arrow,
    :root:not([data-theme="light"]) .sheet__scribble { filter: drop-shadow(0 0 6px currentColor); }
}

@media (forced-colors: active) {
    .eyebrow, .brand__dot, .hero__stamp { text-shadow: none; }
    .brand__mark, .mod__icon, .why__icon, .day__dot, .btn--primary { box-shadow: none; }
}

/* The enlarged wordmark still fits at 375px (17px of headroom), so only step
   it down below that rather than let the bar clip on smaller handsets. */
@media (max-width: 374px) {
    .nav__inner { gap: 0.7rem; }
    .brand { font-size: 0.98rem; gap: 0.45rem; }
    .brand__mark { width: 32px; height: 32px; font-size: 0.8125rem; border-width: 2px; }
    .nav__actions--desktop { gap: 0.45rem; }
    .theme-toggle, .nav__toggle { width: 38px; height: 38px; }
}