/* AppDeen AI components v1.0 — requires tokens.css. Copy as-is. */

/* @component base */
.ad-root{ background:var(--ad-void); color:var(--ad-white); font-family:var(--ad-font-text); font-size:var(--ad-fs-body); line-height:var(--ad-lh-body); -webkit-font-smoothing:antialiased; }
.ad-light{ background:var(--ad-paper); color:var(--ad-navy); }
.ad-display, .ad-h1, .ad-h2, .ad-h3{ font-family:var(--ad-font-display); font-stretch:var(--ad-display-stretch); text-wrap:balance; margin:0; }
.ad-display{ font-size:var(--ad-fs-display); font-weight:800; line-height:.96; letter-spacing:-.04em; }
.ad-h1{ font-size:var(--ad-fs-h1); font-weight:800; line-height:1.02; letter-spacing:-.03em; }
.ad-h2{ font-size:var(--ad-fs-h2); font-weight:700; line-height:1.06; letter-spacing:-.02em; }
.ad-h3{ font-size:var(--ad-fs-h3); font-weight:700; line-height:1.15; letter-spacing:-.01em; }
.ad-h4{ font-family:var(--ad-font-text); font-size:var(--ad-fs-h4); font-weight:700; line-height:1.35; margin:0; }
.ad-lead{ font-size:var(--ad-fs-body-l); line-height:1.6; }
.ad-small{ font-size:var(--ad-fs-small); line-height:1.5; }
.ad-label{ font-family:var(--ad-font-mono); font-size:var(--ad-fs-label); font-weight:700; letter-spacing:var(--ad-track-label); text-transform:uppercase; line-height:1.4; }
.ad-data{ font-family:var(--ad-font-mono); font-size:var(--ad-fs-small); font-variant-numeric:tabular-nums; }
.ad-hl{ color:var(--ad-blue); }
.ad-em{ font-family:var(--ad-font-display); font-stretch:var(--ad-display-stretch); font-weight:700; color:var(--ad-blue); }
/* @end */

/* @component eyebrow */
.ad-eyebrow{ display:inline-flex; align-items:center; gap:.75em; font-family:var(--ad-font-mono); font-size:var(--ad-fs-label); font-weight:700; letter-spacing:var(--ad-track-label); text-transform:uppercase; color:var(--ad-white); }
.ad-eyebrow::before{ content:">>>"; color:var(--ad-blue); letter-spacing:.12em; animation:ad-chev 2.6s ease-in-out infinite; }
@keyframes ad-chev{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
.ad-light .ad-eyebrow{ color:var(--ad-navy); }
/* @end */

/* @component button */
.ad-btn{ --h:48px; display:inline-flex; align-items:center; justify-content:center; gap:.55em; height:var(--h); padding:0 1.5rem; border-radius:var(--ad-radius-pill); border:1px solid transparent; font:600 .9375rem/1 var(--ad-font-text); text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform var(--ad-dur-fast) var(--ad-ease-out), box-shadow var(--ad-dur-base) var(--ad-ease-out), background-color var(--ad-dur-fast), border-color var(--ad-dur-fast), color var(--ad-dur-fast); }
.ad-btn:focus-visible{ outline:2px solid var(--ad-white); outline-offset:3px; }
.ad-btn--primary{ background:var(--ad-blue); color:var(--ad-white); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); }
.ad-btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--ad-shadow-glow), inset 0 1px 0 rgba(255,255,255,.22); }
.ad-btn--secondary{ background:transparent; color:var(--ad-white); border-color:rgba(255,255,255,.28); }
.ad-btn--secondary:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.5); }
.ad-light .ad-btn--secondary{ color:var(--ad-navy); border-color:var(--ad-navy); }
.ad-light .ad-btn--secondary:hover{ background:var(--ad-navy); color:var(--ad-white); }
.ad-btn--sm{ --h:40px; padding:0 1.1rem; font-size:.875rem; }
.ad-link{ display:inline-flex; align-items:center; gap:.45em; color:var(--ad-white); font-weight:600; text-decoration:none; }
.ad-link .ad-arrow{ transition:transform var(--ad-dur-base) var(--ad-ease-out); }
.ad-link:hover .ad-arrow{ transform:translateX(4px); }
.ad-light .ad-link{ color:var(--ad-blue); }
/* @end */

/* @component glass-nav */
.ad-nav{ position:relative; display:flex; align-items:center; gap:.5rem; height:56px; padding:7px 7px 7px 18px; border-radius:var(--ad-radius-pill); background:var(--ad-glass-bg); -webkit-backdrop-filter:var(--ad-glass-blur); backdrop-filter:var(--ad-glass-blur); border:1px solid var(--ad-glass-border); box-shadow:var(--ad-glass-shadow); }
.ad-nav::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(168deg, rgba(255,255,255,.10), rgba(255,255,255,0) 42%); }
.ad-nav > *{ position:relative; z-index:1; }
.ad-nav__logo{ display:block; height:22px; width:auto; }
.ad-nav__links{ display:flex; gap:2px; margin-inline:auto; }
.ad-nav__links a{ color:var(--ad-white); text-decoration:none; font-size:.875rem; font-weight:500; padding:.5rem .8rem; border-radius:var(--ad-radius-pill); transition:background-color var(--ad-dur-fast); }
.ad-nav__links a:hover, .ad-nav__links a[aria-current="true"]{ background:rgba(255,255,255,.1); }
/* @end */

/* @component status */
.ad-status{ display:inline-flex; align-items:center; gap:.55em; height:28px; padding:0 .8rem; border-radius:var(--ad-radius-pill); border:1px solid rgba(255,255,255,.2); font-family:var(--ad-font-mono); font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ad-white); white-space:nowrap; }
.ad-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ad-white); }
.ad-status--live{ border-color:var(--ad-blue); background:var(--ad-blue-24); }
.ad-status--live::before{ background:var(--ad-white); animation:ad-pulse 2s var(--ad-ease-out) infinite; }
.ad-status--training::before{ background:var(--ad-blue); }
.ad-status--concept::before{ background:transparent; border:1.5px solid var(--ad-white); }
@keyframes ad-pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.7); } 70%{ box-shadow:0 0 0 8px rgba(255,255,255,0); } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } }
/* @end */

/* @component card */
.ad-card{ position:relative; overflow:hidden; padding:var(--ad-space-6); border-radius:var(--ad-radius-lg); background:var(--ad-hl-panel); border:1px solid var(--ad-line); color:var(--ad-white); transition:border-color var(--ad-dur-base), transform var(--ad-dur-base) var(--ad-ease-out); }
.ad-card::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(34,84,242,.28), transparent 62%); transition:opacity var(--ad-dur-base); }
.ad-card:hover{ border-color:#313849; }
.ad-card:hover::before{ opacity:1; }
.ad-card > *{ position:relative; }
/* @end */

/* @component field */
.ad-field{ display:grid; gap:.5rem; }
.ad-field label{ font-family:var(--ad-font-mono); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ad-white); }
.ad-input{ height:48px; padding:0 1rem; border-radius:var(--ad-radius-md); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.18); color:var(--ad-white); font:400 1rem var(--ad-font-text); transition:border-color var(--ad-dur-fast), box-shadow var(--ad-dur-fast); }
.ad-input::placeholder{ color:var(--ad-white); opacity:.6; }
.ad-input:focus{ outline:none; border-color:var(--ad-blue); box-shadow:0 0 0 4px var(--ad-blue-24); }
/* @end */

/* @component powered-by */
.ad-powered{ display:inline-flex; align-items:center; gap:.55rem; height:34px; padding:0 .95rem 0 .75rem; border-radius:var(--ad-radius-pill); background:var(--ad-glass-bg); -webkit-backdrop-filter:var(--ad-glass-blur); backdrop-filter:var(--ad-glass-blur); border:1px solid var(--ad-glass-border); box-shadow:var(--ad-glass-shadow); color:var(--ad-white); text-decoration:none; font:500 .8125rem/1 var(--ad-font-text); white-space:nowrap; transition:transform var(--ad-dur-fast) var(--ad-ease-out), border-color var(--ad-dur-fast); }
.ad-powered svg{ width:16px; height:auto; fill:var(--ad-blue); flex:none; }
.ad-powered b{ font-weight:700; }
.ad-powered b span{ color:var(--ad-blue); }
.ad-powered:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.3); }
.ad-powered--light{ background:rgba(255,255,255,.72); border-color:rgba(18, 21, 29,.12); color:var(--ad-navy); box-shadow:0 10px 30px -16px rgba(18, 21, 29,.35), inset 0 1px 0 #fff; }
.ad-powered--light svg, .ad-powered--light b span{ fill:var(--ad-blue); color:var(--ad-blue); }
/* @end */

/* @component employee-card */
.ad-emp{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:440px; overflow:hidden; border-radius:var(--ad-radius-xl); border:1px solid var(--ad-line); color:var(--ad-white); background:radial-gradient(70% 90% at 78% 35%, rgba(34,84,242,.38), transparent 65%), linear-gradient(180deg, var(--ad-navy), var(--ad-void)); }
.ad-emp__body{ display:flex; flex-direction:column; gap:1.1rem; padding:clamp(28px,4vw,52px); min-width:0; }
.ad-emp__name{ font-family:var(--ad-font-display); font-stretch:var(--ad-display-stretch); font-weight:800; font-size:clamp(2.5rem,5vw,4rem); line-height:.95; letter-spacing:-.035em; margin:0; }
.ad-emp__role{ font-family:var(--ad-font-mono); font-size:.8125rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--ad-white); margin:0; }
.ad-emp__line{ font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.35; font-weight:500; margin:.4rem 0 0; }
.ad-emp__skills{ display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin:0; padding:0; list-style:none; font-size:1rem; }
.ad-emp__skills li + li::before{ content:"·"; margin-right:.9rem; color:var(--ad-blue); }
.ad-emp__verbs{ font-family:var(--ad-font-mono); font-weight:700; font-size:.875rem; letter-spacing:.14em; color:var(--ad-white); margin:auto 0 0; }
.ad-emp__fig{ position:relative; min-height:300px; }
.ad-emp__fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 12%; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%); mask-image:linear-gradient(90deg, transparent 0, #000 22%); }
@media (max-width:700px){ .ad-emp{ grid-template-columns:1fr; } .ad-emp__fig{ order:-1; min-height:340px; } .ad-emp__fig img{ -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent); mask-image:linear-gradient(180deg,#000 70%,transparent); } }
/* @end */

/* @component motion */
.ad-reveal{ transform:translateY(18px); opacity:.35; transition:transform var(--ad-dur-slow) var(--ad-ease-out), opacity var(--ad-dur-slow) var(--ad-ease-out); }
.ad-reveal.is-in{ transform:none; opacity:1; }
.ad-chars .ad-ch{ display:inline-block; opacity:0; transform:translateY(.55em) rotate(1.5deg); filter:blur(7px); transition:opacity .45s ease, transform var(--ad-dur-slow) var(--ad-ease-out), filter .5s ease; transition-delay:calc(var(--i) * var(--ad-stagger)); }
.ad-chars.is-in .ad-ch{ opacity:1; transform:none; filter:none; }
.ad-chars .ad-w{ display:inline-block; white-space:nowrap; }
@media (prefers-reduced-motion: reduce){
  .ad-reveal, .ad-chars .ad-ch{ transform:none !important; opacity:1 !important; filter:none !important; transition:none !important; }
  .ad-status--live::before, .ad-eyebrow::before{ animation:none; }
}
/* @end */