/* ==========================================================================
   NEXDAM DESIGN SYSTEM
   Single source of truth for design tokens + reusable components.
   Additive layer — does not modify existing site logic or classes.
   Load this file BEFORE page-specific stylesheets.
   Full documentation: css/README.md
   ========================================================================== */

:root{

    /* ── 1. PALETTE ──────────────────────────────────────────────────────
       Semantic colours. Each has a base, a hover/deep shade, and a soft
       translucent tint for backgrounds/rings. */

    /* Primary — brand blue */
    --ds-primary:            #00a2ff;
    --ds-primary-deep:       #0077ff;
    --ds-primary-soft:       rgba(0,162,255,.12);
    --ds-primary-ring:       rgba(0,162,255,.22);

    /* Secondary — electric cyan */
    --ds-secondary:          #00d4ff;
    --ds-secondary-deep:     #00a8cc;
    --ds-secondary-soft:     rgba(0,212,255,.12);

    /* Accent — soft indigo/violet (subtle premium accent) */
    --ds-accent:             #7c86ff;
    --ds-accent-deep:        #5b63e6;
    --ds-accent-soft:        rgba(124,134,255,.14);

    /* Success */
    --ds-success:            #22c55e;
    --ds-success-deep:       #16a34a;
    --ds-success-soft:       rgba(34,197,94,.12);

    /* Warning */
    --ds-warning:            #f59e0b;
    --ds-warning-deep:       #d97706;
    --ds-warning-soft:       rgba(245,158,11,.12);

    /* Error */
    --ds-error:              #ff5c72;
    --ds-error-deep:         #e11d48;
    --ds-error-soft:         rgba(255,92,114,.12);

    /* Surfaces & background — deep premium navy */
    --ds-background:         #070d1a;   /* app background */
    --ds-background-deep:    #04070f;   /* footer / deepest layer */
    --ds-surface:            #0d1728;   /* cards, panels */
    --ds-surface-soft:       #111d33;   /* raised / hovered surface */
    --ds-surface-input:      #0a1322;   /* form controls */
    --ds-surface-raised:     #1a2b47;   /* lightest navy step (portal, popovers) */
    --ds-surface-raised-hi:  #24385a;   /* raised-surface highlight edge */

    /* Glass surfaces (translucent, used with backdrop-filter) */
    --ds-glass:              rgba(17,28,48,.55);
    --ds-glass-strong:       rgba(17,28,48,.72);
    --ds-glass-border:       rgba(150,180,225,.12);

    /* Text */
    --ds-text:               #eef4fb;   /* primary text */
    --ds-text-muted:         #9fb0c4;   /* secondary text */
    --ds-text-faint:         #6b7d94;   /* captions / footer */

    /* Borders — softer, more elegant */
    --ds-border:             rgba(150,180,225,.13);
    --ds-border-soft:        rgba(150,180,225,.08);
    --ds-border-strong:      rgba(0,162,255,.55);


    /* ── 2. TYPOGRAPHY ───────────────────────────────────────────────────
       Font family + a fluid type scale (clamp so it scales with viewport). */

    --ds-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font sizes (Inter scale) */
    --ds-fs-display:  clamp(46px, 6.4vw, 72px);
    --ds-fs-h1:       clamp(33px, 5vw, 44px);
    --ds-fs-h2:       clamp(27px, 3.4vw, 34px);
    --ds-fs-h3:       20px;
    --ds-fs-body:     16px;
    --ds-fs-caption:  13px;

    /* Font weights */
    --ds-fw-light:    300;
    --ds-fw-regular:  400;
    --ds-fw-medium:   500;
    --ds-fw-semibold: 600;
    --ds-fw-bold:     700;

    /* Line heights */
    --ds-lh-tight:    1.06;
    --ds-lh-heading:  1.12;
    --ds-lh-body:     1.75;

    /* Letter spacing */
    --ds-ls-tight:    -.045em;
    --ds-ls-heading:  -.025em;
    --ds-ls-wide:     .08em;
    --ds-ls-eyebrow:  .18em;


    /* ── 3. SPACING (4-based scale) ──────────────────────────────────── */
    --ds-space-1:   4px;
    --ds-space-2:   8px;
    --ds-space-3:   12px;
    --ds-space-4:   16px;
    --ds-space-6:   24px;
    --ds-space-8:   32px;
    --ds-space-12:  48px;
    --ds-space-16:  64px;


    /* ── 5. SHADOWS — soft, layered, premium ─────────────────────────── */
    --ds-shadow-sm:    0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(2,8,20,.24);
    --ds-shadow-md:    0 4px 14px rgba(0,0,0,.28), 0 14px 34px rgba(2,8,20,.34);
    --ds-shadow-lg:    0 8px 24px rgba(0,0,0,.3), 0 30px 64px rgba(2,8,20,.46);
    --ds-shadow-glow:  0 0 0 1px rgba(0,162,255,.12), 0 12px 40px rgba(0,140,255,.28);


    /* ── 6. BORDER RADIUS ────────────────────────────────────────────── */
    --ds-radius-sm:    8px;
    --ds-radius-md:    12px;
    --ds-radius-lg:    20px;
    --ds-radius-xl:    22px;
    --ds-radius-pill:  999px;


    /* ── 7. ANIMATION ────────────────────────────────────────────────── */
    --ds-transition-fast:   .18s ease;
    --ds-transition-base:   .25s ease;
    --ds-transition-slow:   .4s ease;
    --ds-ease-out:          cubic-bezier(.16,1,.3,1);


    /* ── 8. BACKWARD-COMPAT ALIASES ──────────────────────────────────────
       Keeps the original variable names working so existing stylesheets
       (pages.css, home.css, …) are untouched and stay perfectly in sync. */
    --bg:         var(--ds-background);
    --bg-deep:    var(--ds-background-deep);
    --panel:      var(--ds-surface);
    --panel-soft: var(--ds-surface-soft);
    --blue:       var(--ds-primary);
    --blue-deep:  var(--ds-primary-deep);
    --cyan:       var(--ds-secondary);
    --text:       var(--ds-text);
    --muted:      var(--ds-text-muted);
    --line:       var(--ds-border);
    --shadow:     var(--ds-shadow-lg);
}


/* ==========================================================================
   ANIMATIONS (keyframes)
   ========================================================================== */
@keyframes ds-fade-in{
    from{ opacity:0; transform:translateY(10px); }
    to  { opacity:1; transform:translateY(0); }
}
@keyframes ds-scale-in{
    from{ opacity:0; transform:scale(.96); }
    to  { opacity:1; transform:scale(1); }
}
@keyframes ds-spin{
    to{ transform:rotate(360deg); }
}
@keyframes ds-pulse{
    0%,100%{ opacity:1; }
    50%    { opacity:.55; }
}

.ds-animate-fade  { animation:ds-fade-in  .5s var(--ds-ease-out) both; }
.ds-animate-scale { animation:ds-scale-in .35s var(--ds-ease-out) both; }
.ds-animate-pulse { animation:ds-pulse 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}


/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* ── Container ─────────────────────────────────────────────────────────── */
.ds-container{
    width:min(1180px, 90%);
    margin-inline:auto;
}
.ds-container-narrow{ width:min(760px, 90%); }
.ds-container-wide  { width:min(1400px, 92%); }


/* ── Section ───────────────────────────────────────────────────────────── */
.ds-section{ padding:var(--ds-space-16) 0; }
.ds-section-soft{
    background:rgba(2,6,13,.48);
    border-block:1px solid rgba(0,162,255,.08);
}
.ds-section-heading{
    max-width:720px;
    margin:0 auto var(--ds-space-12);
    text-align:center;
}


/* ── Typography helpers ────────────────────────────────────────────────── */
.ds-display{
    font-size:var(--ds-fs-display);
    line-height:var(--ds-lh-tight);
    letter-spacing:var(--ds-ls-tight);
    font-weight:var(--ds-fw-bold);
}
.ds-h1{
    font-size:var(--ds-fs-h1);
    line-height:var(--ds-lh-heading);
    letter-spacing:var(--ds-ls-tight);
    font-weight:var(--ds-fw-bold);
}
.ds-h2{
    font-size:var(--ds-fs-h2);
    line-height:var(--ds-lh-heading);
    letter-spacing:var(--ds-ls-heading);
    font-weight:var(--ds-fw-semibold);
}
.ds-h3{
    font-size:var(--ds-fs-h3);
    letter-spacing:var(--ds-ls-heading);
    font-weight:var(--ds-fw-semibold);
}
.ds-body{
    font-size:var(--ds-fs-body);
    line-height:var(--ds-lh-body);
    color:var(--ds-text-muted);
}
.ds-caption{
    font-size:var(--ds-fs-caption);
    color:var(--ds-text-faint);
    line-height:1.6;
}
.ds-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:var(--ds-fs-caption);
    font-weight:var(--ds-fw-semibold);
    letter-spacing:var(--ds-ls-eyebrow);
    text-transform:uppercase;
    color:var(--ds-secondary);
}
.ds-eyebrow::before{
    content:"";
    width:34px;
    height:1px;
    background:var(--ds-secondary);
}
.ds-text-gradient{
    background:linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}


/* ── Button ────────────────────────────────────────────────────────────── */
.ds-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:13px 24px;
    border:1px solid transparent;
    border-radius:var(--ds-radius-pill);
    background:linear-gradient(135deg, var(--ds-primary-deep), var(--ds-primary));
    color:#fff;
    font-family:var(--ds-font-family);
    font-size:14px;
    font-weight:var(--ds-fw-semibold);
    letter-spacing:-.01em;
    cursor:pointer;
    box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 8px 22px rgba(0,119,255,.26);
    transition:transform var(--ds-transition-base), box-shadow var(--ds-transition-base), filter var(--ds-transition-base);
}
.ds-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 14px 36px rgba(0,140,255,.42);
    filter:saturate(1.08);
}
.ds-btn:active{ transform:translateY(0); box-shadow:0 4px 14px rgba(0,119,255,.3); }
.ds-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.ds-btn:focus-visible{ outline:2px solid var(--ds-secondary); outline-offset:3px; }

.ds-btn-outline{
    background:var(--ds-glass);
    border-color:var(--ds-border);
    box-shadow:var(--ds-shadow-sm);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}
.ds-btn-outline:hover{
    border-color:var(--ds-border-strong);
    background:var(--ds-glass-strong);
    box-shadow:0 10px 30px rgba(0,140,255,.16);
    filter:none;
}
.ds-btn-ghost{
    background:transparent;
    color:var(--ds-text-muted);
}
.ds-btn-ghost:hover{
    background:var(--ds-primary-soft);
    color:#fff;
    box-shadow:none;
}
.ds-btn-danger{
    background:linear-gradient(135deg, var(--ds-error-deep), var(--ds-error));
}
.ds-btn-sm{ padding:9px 16px; font-size:13px; }
.ds-btn-lg{ padding:17px 32px; font-size:15px; }


/* ── Card — glass surface with depth ───────────────────────────────────── */
.ds-card{
    position:relative;
    overflow:hidden;
    padding:var(--ds-space-8);
    border:1px solid var(--ds-glass-border);
    border-radius:var(--ds-radius-lg);
    background:
        linear-gradient(150deg, rgba(28,44,74,.55), rgba(11,20,38,.62));
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:var(--ds-shadow-lg);
    transition:transform .45s var(--ds-ease-out),
               border-color .45s var(--ds-ease-out),
               box-shadow .45s var(--ds-ease-out);
}
/* soft top highlight so glass catches the light */
.ds-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    pointer-events:none;
}
.ds-card-hover{ cursor:pointer; }
.ds-card-hover:hover{
    transform:translateY(-4px);
    border-color:rgba(0,162,255,.35);
    box-shadow:var(--ds-shadow-lg), 0 24px 60px rgba(0,120,255,.16);
}
.ds-card-flat{
    background:var(--ds-surface);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:var(--ds-shadow-sm);
}

/* Sensible premium typography for raw (unclassed) content inside cards —
   keeps titles refined instead of heavy browser-default white bold.
   :not([class]) leaves helper classes (home-card-title, …) untouched. */
.ds-card h2:not([class]),
.ds-card h3:not([class]){
    margin-top:var(--ds-space-4);
    font-size:20px;
    font-weight:var(--ds-fw-semibold);
    line-height:1.3;
    letter-spacing:-.015em;
    color:var(--ds-text);
}
.ds-card h2:not([class]) + p:not([class]),
.ds-card h3:not([class]) + p:not([class]){
    margin-top:9px;
}
.ds-card p:not([class]){
    color:var(--ds-text-muted);
    font-size:14.5px;
    line-height:1.7;
}


/* ── Badge ─────────────────────────────────────────────────────────────── */
.ds-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-pill);
    background:var(--ds-primary-soft);
    color:var(--ds-secondary);
    font-size:11px;
    font-weight:var(--ds-fw-semibold);
    letter-spacing:.1em;
    text-transform:uppercase;
    line-height:1;
}
.ds-badge-success{ background:var(--ds-success-soft); color:var(--ds-success); border-color:rgba(34,197,94,.3); }
.ds-badge-warning{ background:var(--ds-warning-soft); color:var(--ds-warning); border-color:rgba(245,158,11,.3); }
.ds-badge-error  { background:var(--ds-error-soft);   color:var(--ds-error);   border-color:rgba(255,92,114,.3); }
.ds-badge-dot::before{
    content:"";
    width:6px; height:6px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 8px currentColor;
}


/* ── Input ─────────────────────────────────────────────────────────────── */
.ds-field{ display:grid; gap:var(--ds-space-2); }
.ds-label{
    font-size:12px;
    font-weight:var(--ds-fw-semibold);
    letter-spacing:var(--ds-ls-wide);
    text-transform:uppercase;
    color:#c6d4e4;
}
.ds-input,
.ds-select,
.ds-textarea{
    width:100%;
    padding:14px 15px;
    border:1px solid rgba(0,162,255,.2);
    border-radius:var(--ds-radius-md);
    outline:none;
    background:var(--ds-surface-input);
    color:#fff;
    font-family:var(--ds-font-family);
    font-size:14px;
    transition:border-color var(--ds-transition-base), box-shadow var(--ds-transition-base);
}
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus{
    border-color:var(--ds-primary);
    box-shadow:0 0 0 3px var(--ds-primary-soft);
}
.ds-input::placeholder,
.ds-textarea::placeholder{ color:#5f708a; }
.ds-textarea{ min-height:145px; resize:vertical; }
.ds-input-error{ border-color:var(--ds-error) !important; }
.ds-hint{ font-size:12px; color:var(--ds-text-muted); }
.ds-hint-error{ color:var(--ds-error); }


/* ── Modal ─────────────────────────────────────────────────────────────── */
.ds-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:2000;
    display:grid;
    place-items:center;
    padding:var(--ds-space-4);
    background:rgba(2,6,13,.72);
    backdrop-filter:blur(6px);
    animation:ds-fade-in .2s ease both;
}
.ds-modal{
    width:min(520px, 100%);
    padding:var(--ds-space-8);
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-xl);
    background:linear-gradient(145deg, rgba(13,24,43,.98), rgba(7,15,28,.98));
    box-shadow:var(--ds-shadow-lg);
    animation:ds-scale-in .25s var(--ds-ease-out) both;
}
.ds-modal h2{ margin-top:var(--ds-space-2); font-size:24px; letter-spacing:var(--ds-ls-heading); }
.ds-modal p{ margin-top:var(--ds-space-3); color:var(--ds-text-muted); font-size:14px; line-height:1.7; }
.ds-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:var(--ds-space-3);
    margin-top:var(--ds-space-6);
}


/* ── Utilities ─────────────────────────────────────────────────────────── */
.ds-stack   { display:grid; gap:var(--ds-space-4); }
.ds-row     { display:flex; align-items:center; gap:var(--ds-space-3); }
.ds-grid-2  { display:grid; gap:var(--ds-space-6); grid-template-columns:repeat(2,minmax(0,1fr)); }
.ds-grid-3  { display:grid; gap:var(--ds-space-6); grid-template-columns:repeat(3,minmax(0,1fr)); }
.ds-divider { height:1px; background:var(--ds-border-soft); border:0; margin:var(--ds-space-6) 0; }
.ds-spinner{
    width:18px; height:18px;
    border:2px solid var(--ds-primary-soft);
    border-top-color:var(--ds-primary);
    border-radius:50%;
    animation:ds-spin .7s linear infinite;
}

@media (max-width:820px){
    .ds-grid-2,
    .ds-grid-3{ grid-template-columns:1fr; }
}


/* ==========================================================================
   SHARED PAGE COMPONENTS
   Reusable across home, services and other pages.
   ========================================================================== */

/* ── Scroll reveal micro-animation ───────────────────────────────────────
   Re-triggers in both scroll directions (GitHub-style). Variants:
   .reveal (up) · .reveal-left · .reveal-right · .reveal-scale */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale{
    opacity:0;
    transition:opacity .7s var(--ds-ease-out), transform .7s var(--ds-ease-out);
    will-change:opacity, transform;
}
.reveal{ transform:translateY(26px); }
.reveal-left{ transform:translateX(-40px); }
.reveal-right{ transform:translateX(40px); }
.reveal-scale{ transform:scale(.94); }
.reveal.in,
.reveal-left.in,
.reveal-right.in,
.reveal-scale.in{ opacity:1; transform:none; }

/* ── Generic tilt + cursor spotlight (add data-tilt to any panel) ────────── */
[data-tilt]{
    --mx:50%; --my:35%;
    --px:0px; --py:0px;
}
[data-tilt]::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:5;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(240px 240px at var(--mx) var(--my),
              rgba(120,210,255,.16), transparent 70%);
    mix-blend-mode:screen;
    transition:opacity .3s ease;
}
[data-tilt]:hover::after{ opacity:1; }

/* ── Mini "live panel" illustrations (service / status cards) ────────────── */
.svc-mini{
    border:1px solid rgba(0,162,255,.14);
    border-radius:14px;
    background:rgba(5,11,22,.5);
    overflow:hidden;
    transition:border-color var(--ds-transition-slow), transform var(--ds-transition-slow);
}
.ds-card-hover:hover .svc-mini{
    border-color:rgba(0,162,255,.32);
    transform:translateY(-2px);
}
.svc-mini-bar{
    display:flex;
    align-items:center;
    gap:5px;
    padding:9px 12px;
    border-bottom:1px solid rgba(0,162,255,.1);
    background:rgba(0,162,255,.03);
}
.svc-mini-bar i{ width:8px; height:8px; border-radius:50%; }
.svc-mini-bar i:nth-child(1){ background:#ff5f57; }
.svc-mini-bar i:nth-child(2){ background:#febc2e; }
.svc-mini-bar i:nth-child(3){ background:#28c840; }
.svc-mini-bar .t{
    margin-left:auto;
    font-size:9px;
    letter-spacing:.1em;
    text-transform:lowercase;
    color:var(--ds-text-muted);
    font-family:ui-monospace,Menlo,Consolas,monospace;
}
.svc-mini-rows{
    list-style:none;
    margin:0;
    padding:11px 12px;
    display:grid;
    gap:9px;
}
.svc-mini-rows li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:12px;
}
.svc-mini-label{ color:#c1d2e4; }
.svc-mini-val{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:var(--ds-fw-semibold);
    color:var(--ds-text-muted);
    font-variant-numeric:tabular-nums;
}
.svc-mini-val.ok{ color:var(--ds-success); }
.svc-mini-val.ok::before{
    content:"";
    width:6px; height:6px;
    border-radius:50%;
    background:var(--ds-success);
    box-shadow:0 0 7px var(--ds-success);
}
.svc-mini-val.num{ color:#eaf4ff; }
/* one dot gently pulses so the panel feels alive */
.svc-mini-rows li:first-child .svc-mini-val.ok::before{
    animation:ds-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce){
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale{ opacity:1; transform:none; transition:none; }
    [data-tilt]::after{ display:none; }
}


/* ── Accessibility: visually hidden but available to screen readers ──────── */
.sr-only{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}