/* ============ DESIGN SYSTEM ============ */
:root{
  --blue:#0E9C8A; --violet:#14607A; --cyan:#5EE0C4;
  --grad:linear-gradient(92deg,#5EE0C4 -20%,#0E9C8A 45%,#14607A 105%);
  --grad-soft:linear-gradient(180deg,rgba(94,224,196,.10),rgba(20,96,122,.06));
  --ink:#22312F; --muted:#7E7D83; --border:#E6E6EA; --bg:#fff;
  --dark:#141319; --dark-2:#1E1C26; --dark-card:#232030; --dark-border:#332F42; --dark-muted:#A7A3B5;
  --r-card:18px; --r-btn:12px; --wrap:1180px; --dur:.22s;
  --shadow:0 2px 16px rgba(24,24,40,.06); --shadow-hover:0 14px 34px rgba(20,20,40,.10);
  --font:'Nunito Sans',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono',monospace;
}
/* Chinese version. Nunito Sans and IBM Plex Mono have no CJK glyphs, and without this
   the browser picks whatever it finds – usually a serif font that clashes with the layout.
   Latin letters and digits still come from Nunito Sans, CJK glyphs fall back
   to the system CJK fonts: they exist on every platform and weigh nothing,
   so we don't load a multi-megabyte web font. */
html[lang^="zh"]{
  --font:'Nunito Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --mono:'IBM Plex Mono','PingFang SC','Microsoft YaHei',monospace;
}
/* Inside SVG there is no inheritance from body – the picket sign font is set separately. */
.picket-cjk{font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* the anchor must not slide under the main site's sticky header */
[id]{scroll-margin-top:78px}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ============ UTILITIES ============ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
/* .eyebrow (tag headings above titles) was removed on purpose – not shown on the front end. */
/* 820, not 720: "Delegate what eats up your day" at 44px needs 761px,
   otherwise the last word breaks onto its own line. .sec-sub has its own measure – 640px. */
.sec-head{margin-bottom:44px;max-width:820px}
.sec-title{font-size:clamp(28px,3.6vw,44px);font-weight:900;letter-spacing:-.02em;line-height:1.12;margin-top:14px}
.sec-title-light{color:#fff}
.sec-sub{margin-top:16px;font-size:17px;color:var(--muted);max-width:640px}
.sec-sub-light{color:var(--dark-muted)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 44px cap: the hero-copy column is ~569px, "an assistant from the year 2032"
   at 44px needs 530px and fits on the line; at 48px it breaks onto a third line */
h1{font-size:clamp(32px,4.4vw,44px);font-weight:900;letter-spacing:-.022em;line-height:1.09}
.sub{margin-top:20px;font-size:clamp(16px,1.6vw,20px);color:var(--muted);max-width:600px}
section{padding:88px 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:var(--r-btn);
  font-weight:800;font-size:15px;cursor:pointer;border:none;transition:transform var(--dur),box-shadow var(--dur),filter var(--dur);white-space:nowrap}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 8px 24px rgba(14,156,138,.28)}
.btn-grad:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--ink)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-block{width:100%;justify-content:center;padding:16px}
.ar{transition:transform var(--dur)}
.btn:hover .ar{transform:translateX(3px)}

/* ============ HERO ============ */
.hero{padding:56px 0 64px;background:var(--grad-soft);position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1fr .8fr;gap:40px;align-items:center}
.hero-copy h1{margin:0}
/* .hero-note – the "closed beta" badge, moved out of the hero; the class is kept for a future separate block */
.hero-note{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero-lead{margin-top:20px;max-width:520px;font-size:clamp(16px,1.7vw,19px);color:var(--muted);line-height:1.6}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:0}
.badges-c{justify-content:center}
.badge{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:100px;background:#fff;border:1px solid var(--border);color:var(--muted)}
.badge-grad{background:var(--grad);color:#fff;border:none}
.badge-new{background:rgba(20,96,122,.10);color:var(--violet);border-color:rgba(20,96,122,.25)}

/* --- hero visual: Jarvis avatar + speech bubble --- */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:flex-start}

/* A circle, not a frame. A framed rectangle read as an inset on the page;
   a circle reads as an avatar. Square crop, face in the centre.
   overflow is NOT set here: the glow and orbits must extend outside. */
.shado{position:relative;width:min(400px,74vw);aspect-ratio:1;margin:0 auto}

/* Glow: the avatar lights up the page around it.
   The period matches the breathing: the aura should rise together with it. */
.shado-glow{position:absolute;inset:-16%;border-radius:50%;z-index:0;pointer-events:none;filter:blur(34px);
  background:radial-gradient(closest-side,rgba(94,224,196,.52),rgba(20,96,122,.24) 58%,transparent 80%);
  animation:bloom 4.6s ease-in-out infinite}

/* Pulses: a ring spreads out from the avatar and fades – "she is online".
   The second one is offset by half a cycle so the wave never breaks. */
.shado-ripple{position:absolute;inset:-8px;border-radius:50%;z-index:1;pointer-events:none;
  border:1.5px solid rgba(14,156,138,.45);animation:ripple 4.4s ease-out infinite}
.shado-ripple-2{animation-delay:2.2s}

/* Background matching the bottom edge of the frame – a safeguard against a sub-pixel gap
   when the portrait stretches on the inhale. */
.shado-disc{position:relative;z-index:2;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:#313844;box-shadow:0 0 0 7px #fff,0 20px 46px rgba(20,20,45,.20)}
/* Origin slightly above the centre: the frame grows in all directions, a bit more
   upwards. It can't grow from the bottom edge – the figure would stretch up like a stake. */
.shado-disc img{width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:50% 58%;animation:breathe 4.6s ease-in-out infinite}

/* An arc of the brand gradient runs around the avatar edge. The mask keeps only
   a 3px ring of the conic gradient – no fill inside is needed. */
.shado-ring{position:absolute;inset:-9px;border-radius:50%;z-index:3;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg 248deg,rgba(94,224,196,.95) 302deg,rgba(20,96,122,.95) 350deg,transparent 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
          mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:spin 14s linear infinite}

/* Dotted orbit with a dot, counter-clockwise – moving against the arc. */
.shado-orbit{position:absolute;inset:-30px;border-radius:50%;z-index:4;pointer-events:none;
  border:1.5px dashed rgba(14,156,138,.28);animation:spin 32s linear infinite reverse}
.shado-orbit::after{content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;background:var(--grad);box-shadow:0 0 14px rgba(94,224,196,.95)}

/* Scan line: a slow light band moving top to bottom inside the disc. */
.shado-scan{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(150,225,255,.11) 46%,rgba(150,225,255,.17) 50%,rgba(150,225,255,.11) 54%,transparent);
  background-size:100% 38%;background-repeat:no-repeat;
  animation:scan 11s linear infinite}

/* Inhale over 45% of the cycle, the exhale is longer – like a living person. Scaling is strictly
   uniform: different speeds per axis change the face proportions, and that is immediately
   noticeable as a defect. Plus the outline glows – she is luminous, brightness
   reads as well as size and distorts nothing. */
@keyframes breathe{0%,100%{transform:scale(1);     filter:brightness(1)}
                   45%    {transform:scale(1.075); filter:brightness(1.22)}}
@keyframes bloom  {0%,100%{opacity:.55}45%{opacity:1}}
@keyframes scan   {0%{background-position:0 -60%}100%{background-position:0 160%}}
@keyframes spin   {to{transform:rotate(360deg)}}
/* 1.26 is the ceiling: beyond it the ring hits the section edge and gets clipped. */
@keyframes ripple {0%{transform:scale(1);opacity:.5}70%{opacity:0}100%{transform:scale(1.26);opacity:0}}

/* On a narrow screen the orbit doesn't fit the column and gets clipped at the sides. */
@media(max-width:620px){
  .shado{width:min(340px,74vw)}
  .shado-orbit{inset:-18px}
}

/* --- speech bubble (same recipe as singidun.com hero) --- */
/* z-index above the orbit: otherwise its dot passes through the speech text. */
.speech{position:absolute;top:-26px;right:-34px;z-index:6;max-width:274px;
  padding:14px 20px;border:2px solid #14201F;border-radius:22px;background:#fff;
  font-size:17.5px;font-weight:800;line-height:1.32;color:var(--ink);
  box-shadow:6px 8px 0 rgba(15,16,32,.1);animation:bob 6s ease-in-out infinite}
.speech b{font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.speech::before,.speech::after{content:"";position:absolute;width:0;height:0;border-style:solid}
.speech::before{left:38px;bottom:-16px;border-width:16px 14px 0 0;border-color:#14201F transparent transparent}
.speech::after{left:41px;bottom:-11px;border-width:13px 11px 0 0;border-color:#fff transparent transparent}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* The second phrase is hidden by default: only the typing script shows it.
   Without JS and with animation disabled a single phrase remains – together they take
   five lines, and the bubble covers the avatar's face. */
.speech .sp-a{transition:opacity .3s ease}
.speech .sp-b{display:none}
/* Typing cursor. main.js removes it once the line has been typed. */
.speech .sp-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;
  background:var(--ink);animation:caret .9s steps(1) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  .speech{animation:none}
  /* .shado-ripple must be here: otherwise the animation overrides opacity:0 below. */
  .shado-glow,.shado-disc img,.shado-scan,.shado-ring,.shado-orbit,.shado-ripple{animation:none}
  .shado-scan,.shado-ripple{opacity:0}
}


/* ============ CARD ROWS (features / personas) ============ */
.card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* four scenarios – otherwise the fourth card hangs alone on the second row */
.card-row-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1024px){.card-row-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow);transition:transform var(--dur),box-shadow var(--dur)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
/* icon on one line with the title – the card gets shorter */
.card-top{display:flex;align-items:center;gap:13px;margin-bottom:13px}
.card-ico{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--grad-soft);color:var(--blue)}
.card-ico svg{width:24px;height:24px}
.card h3{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.card-desc{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.5}
.card-ex{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);font-size:14px;font-weight:700;color:var(--ink);display:flex;gap:8px}
.card-ex::before{content:"›";color:var(--blue);font-weight:900}
.swipe-hint{display:none;font-family:var(--mono);font-size:12px;color:var(--blue)}

/* ============ 6 · HOW IT WORKS (dark block) ============ */
.tech{background:var(--dark);color:#fff}
/* "What it will never do" – an accent block, not a footnote */
.sec-never{margin-top:30px;background:var(--dark-2);border:1px solid var(--dark-border);border-radius:24px;
  padding:34px 34px 30px;position:relative;overflow:hidden}
.sec-never::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
.sec-never-title{font-size:clamp(22px,2.6vw,30px);font-weight:900;letter-spacing:-.02em;line-height:1.15;color:#fff}
.never-hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-never-sub{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--dark-muted);max-width:56ch}
.sec-never-items{list-style:none;margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px}
.sec-never-items li{display:flex;align-items:flex-start;gap:11px;font-size:15px;font-weight:700;color:#fff;
  padding-top:12px;border-top:1px solid var(--dark-border)}
.sec-never-items i{flex:0 0 auto;color:var(--cyan);margin-top:1px}
.sec-never-items svg{width:19px;height:19px;display:block}

/* ============ FAQ ============ */
.faq-in{max-width:860px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--border);border-radius:14px;background:#fff;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;background:none;border:none;cursor:pointer;font-family:var(--font);font-size:17px;font-weight:800;color:var(--ink);text-align:left}
.faq-q .fi{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform var(--dur)}
.faq-q .fi::before,.faq-q .fi::after{content:"";position:absolute;background:var(--blue);border-radius:2px}
.faq-q .fi::before{top:10px;left:2px;width:18px;height:2px}
.faq-q .fi::after{top:2px;left:10px;width:2px;height:18px;transition:transform var(--dur)}
.faq-item.open .fi::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 24px 22px;color:var(--muted);font-size:15px;line-height:1.6}

/* ============ TEAM ============ */
.team-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.team-member{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow)}
.team-member img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.team-member figcaption{padding:18px 20px 20px}
.team-member h3{font-size:17px;font-weight:800}
.team-member span{font-size:14px;color:var(--muted);font-weight:600}
.team-note{margin-top:24px;text-align:center;font-size:14px;color:var(--muted);font-weight:600}


/* ============ SECTION TONE RHYTHM ============ */
/* white → grey → white → grey → dark → white → grey */
.friction,.audience,.team{background:#FAFAFB}

.sec-head-c{margin-left:auto;margin-right:auto;text-align:center}
/* mascot with a picket sign above the "This is not for everyone" title */
/* the size is chosen so the right column (paperclip + tile) doesn't outgrow
   the left one – otherwise there is nothing to align the tile to and the column bottoms diverge */
.warn-mascot{position:relative;width:240px;height:258px;margin:0 auto}
/* the paperclip is drawn AFTER the picket sign – the pole goes behind its body, as if it were holding it.
   The sign is raised above the head so it doesn't cover the face. */
.warn-mascot img{position:absolute;left:26px;bottom:0;width:71px;height:auto}
.picket{position:absolute;left:16px;top:0;width:154px;height:auto;
  transform:rotate(-5deg);transform-origin:50% 100%;
  filter:drop-shadow(0 12px 22px rgba(200,40,30,.22))}
.sec-head-c .sec-title{margin-top:0}
@media(max-width:860px){
  .warn-mascot{width:216px;height:232px;margin-bottom:12px}
  .warn-mascot img{width:64px;left:23px}
  .picket{width:171px;left:14px}
}
.sec-head-c .sec-sub{margin-left:auto;margin-right:auto}

/* ============ 2 · THE INVISIBLE MAN ============ */
.mf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mf{position:relative;isolation:isolate;text-align:center;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-card);padding:30px 24px 28px;box-shadow:var(--shadow);
  transition:transform var(--dur),box-shadow var(--dur)}
.mf:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
/* Manifesto icon – not a thin stroke on a pale backdrop but a solid
   brand gradient with a white glyph: the card gains weight and colour. */
.mf-ico{position:relative;width:72px;height:72px;display:grid;place-items:center;
  border-radius:20px;background:var(--grad);color:#fff;margin:0 auto 20px;
  box-shadow:0 10px 24px rgba(14,156,138,.26)}
/* soft halo under the tile – depth without an extra border */
.mf-ico::after{content:"";position:absolute;inset:6px 6px -6px;border-radius:20px;
  background:var(--grad);filter:blur(16px);opacity:.34;z-index:-1}
.mf-ico svg{width:34px;height:34px;stroke-width:1.6}
.mf h3{font-size:18px;font-weight:800;letter-spacing:-.01em}
.mf p{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.5}
@media(max-width:1024px){.mf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============ 3 · NO INTERFACES ============ */
/* The visual unit of the block is the "crossed out → promise" contrast itself, not icons */
/* width is limited: in the 1180px container the "before → after" pair drifted
   to the middle of the page and lost its connection to the title on the left */
.fr-list{display:flex;flex-direction:column;gap:0;max-width:800px;
  border-top:1px solid var(--border)}
/* the crossed-out text is aligned right, towards the arrow: the "before → after" pair should read
   as one movement, not as two columns at opposite ends of the screen */
/* The first column width is FIXED, not auto: each .fr is a separate grid,
   tracks aren't shared between rows, and with auto the arrows ended up misaligned. */
.fr{display:grid;grid-template-columns:220px 16px 1fr;align-items:center;gap:18px;
  padding:22px 4px;border-bottom:1px solid var(--border)}
.fr-no{text-align:right;font-size:clamp(15px,1.7vw,18px);font-weight:800;color:#B9B8BF;text-decoration:line-through;
  text-decoration-thickness:2px;text-decoration-color:rgba(216,72,63,.55)}
.fr-arrow{font-size:20px;font-weight:900;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fr-yes{font-size:clamp(15px,1.7vw,18px);font-weight:800;letter-spacing:-.01em;color:var(--ink)}
@media(max-width:700px){
  .fr{grid-template-columns:1fr;gap:6px;padding:18px 2px}
  .fr-arrow{display:none}
  /* text-align:right is only needed to align the arrows on desktop */
  .fr-no{text-align:left;font-size:15px}
  .fr-yes{font-size:18px}
}

/* ============ 6 · PLATFORM TILE (in the tech block) ============ */
.tech-platform{position:relative;overflow:hidden;border-radius:26px;margin-bottom:18px;
  min-height:280px;display:flex;align-items:flex-end;background:#07070C}
.tech-platform img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tech-platform::after{content:"";position:absolute;left:0;right:0;bottom:0;height:78%;pointer-events:none;
  background:linear-gradient(to top,#07070C 0%,rgba(7,7,12,.92) 30%,rgba(7,7,12,.6) 60%,transparent 100%)}
.tech-platform-over{position:relative;z-index:1;padding:38px 32px 30px;max-width:620px}
.tech-platform-over h3{font-size:clamp(24px,2.6vw,32px);font-weight:900;letter-spacing:-.02em;color:#fff}
.tech-platform-over p{margin-top:10px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.74)}
.tech-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-weight:800;font-size:15px;color:var(--cyan)}
.tech-link:hover{text-decoration:underline}

.tech-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.sbadge{font-size:13px;font-weight:700;color:var(--ink);background:#F4F4F7;
  border:1px solid var(--border);padding:8px 14px;border-radius:100px}
.sbadge-dark{background:var(--dark-2);border-color:var(--dark-border);color:#fff}



/* ============ 3 · COMBINED BLOCK GRID ============ */
/* the activity panel is content-fit in height and centred relative to the block */
.fr-in{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:center}
.fr-copy{display:flex;flex-direction:column;justify-content:center}
.fr-copy .sec-head{margin-bottom:28px}

/* ============ 3 · LIVE ACTIVITY ============ */
.transp-demo{display:flex;flex-direction:column;background:var(--dark);border-radius:20px;
  padding:22px;box-shadow:0 20px 50px rgba(20,20,40,.18)}
.demo-head{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:14px;
  font-family:var(--mono);padding-bottom:14px;border-bottom:1px solid var(--dark-border)}
.demo-dot{width:9px;height:9px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 4px rgba(74,222,128,.18)}
.demo-log{display:flex;flex-direction:column;gap:13px;margin-top:18px}
.demo-line{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.45;
  color:var(--dark-muted);opacity:0;transform:translateY(6px);
  transition:opacity .35s,transform .35s}
.demo-line.on{opacity:1;transform:none}
.demo-line .demo-txt{padding-top:3px}
/* typing caret – only on the line being typed right now */
.demo-line.typing .demo-txt::after{content:"";display:inline-block;width:2px;height:1em;
  margin-left:2px;vertical-align:-2px;background:var(--cyan);animation:caret .8s steps(1) infinite}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}
.demo-badge{flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:rgba(94,224,196,.12);color:var(--cyan)}
.demo-badge svg{width:15px;height:15px}
.demo-line.done .demo-badge{background:rgba(74,222,128,.14);color:#4ADE80}
.demo-line.done{color:#fff;font-weight:700}

@media(max-width:900px){
  .fr-in{grid-template-columns:1fr;gap:32px}
}


/* ============ 5 · THIS IS NOT FOR EVERYONE ============ */
/* Title and two tiles on the left, the paperclip with the sign and the third tile below it on the right */
/* The left column is ONE area spanning both rows: otherwise the title sticks
   to the top of its row and the tiles to the bottom of the second, leaving a gap
   as tall as the paperclip between them. */
/* align-items:stretch – the left column stretches to the full block height,
   otherwise a gap as tall as the right column remains under the tiles */
/* both columns have the same width: the tiles don't stretch to the line length,
   and no empty strip appears between them */
.aud-in{display:grid;grid-template-columns:repeat(2,minmax(0,520px));gap:34px 40px;align-items:stretch;
  grid-template-areas:"left right"}
.aud-left{grid-area:left;display:flex;flex-direction:column}
/* description as wide as the tiles – the left column reads as a single column */
.aud-head{margin-bottom:26px;max-width:none}
.aud-head .sec-sub{max-width:none}
.aud-head .sec-title{margin-top:0}
/* Tiles stacked, not in a row: this way the left column grows to the height
   of the right one (paperclip + tile) on its own, and nothing has to be stretched.
   A stretched tile without an image always leaves empty space inside – see bento.md. */
.aud-tiles{display:grid;grid-template-columns:1fr;gap:16px}
/* the right column is a flexbox: paperclip on top, tile pushed to the bottom,
   so its bottom edge lines up with the bottom edge of the left column */
.aud-right{grid-area:right;display:flex;flex-direction:column}
.audience .warn-mascot{margin:0 auto}
.aud-third{margin-top:auto}

@media(max-width:900px){
  .aud-in{grid-template-columns:1fr;gap:24px;grid-template-areas:"left" "right"}
  .aud-right{gap:24px}
  .aud-third{margin-top:0}
  .aud-tiles{margin-top:24px}
}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* ============ CAROUSEL DOTS ============ */
.cdots{display:none;justify-content:center;flex-wrap:wrap;gap:0;margin-top:8px}
/* the dot is visually 8px, but the tap area is 22×38 thanks to padding + content-box:
   a finger hits it, and a row of 9 dots still fits in 375px */
.cdot{width:8px;height:8px;box-sizing:content-box;padding:15px 7px;background-clip:content-box;
  border-radius:99px;border:none;background-color:var(--border);cursor:pointer;transition:var(--dur)}
.cdot.active{background-color:var(--blue);width:22px}
.tech .cdot{background-color:var(--dark-border)}
.tech .cdot.active{background-color:var(--cyan)}

.dbr{display:none}

/* --- marquee about closed enrolment: dark, in the mascot's cyberpunk style --- */
.ticker{display:block;position:relative;overflow:hidden;padding:18px 0;isolation:isolate;
  background:#0B0B11;color:#fff;
  border-top:1px solid rgba(94,224,196,.30);border-bottom:1px solid rgba(94,224,196,.30);
  box-shadow:inset 0 0 70px rgba(94,224,196,.12)}
/* scanline sweep, as in the paperclip renders */
.ticker::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(to bottom,rgba(94,224,196,.09) 0 1px,transparent 1px 4px)}
/* edges fade into darkness – the text isn't cut off at the screen edge */
.ticker::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,#0B0B11,transparent 12%,transparent 88%,#0B0B11)}
.ticker-track{display:flex;width:max-content;animation:tick 34s linear infinite}
.ticker-run{display:flex;align-items:center;gap:26px;padding-right:26px;white-space:nowrap}
.ticker-run i{font-style:italic;font-weight:900;font-size:clamp(16px,2vw,22px);letter-spacing:-.01em;
  transform:skewX(-6deg);display:inline-block;text-shadow:0 0 20px rgba(94,224,196,.45)}
.ticker-run b{font-size:11px;color:var(--cyan);text-shadow:0 0 12px rgba(94,224,196,.8)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* --- security: visual anchors above the guarantees grid --- */
.secshots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:34px}
.secshot{border-radius:20px;overflow:hidden;background:var(--dark-2);border:1px solid var(--dark-border)}
.secshot img{width:100%;height:auto;display:block}
.secshot figcaption{padding:18px 20px 20px}
.secshot b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em;color:#fff}
.secshot span{display:block;margin-top:7px;font-size:13px;line-height:1.55;color:var(--dark-muted)}

/* ============ BENTO (inside the hero) ============ */
/* Built mobile-first: first a single column ordered by importance,
   desktop is layered on top via grid-template-areas – like Apple's bento grids,
   where on mobile the tiles don't just shrink but rearrange by priority. */
/* The mobile base is not a stack of 10 tiles but a 2×N mosaic: short tiles
   ("Talks and decides" + 24/7) pair up, text tiles stay full width.
   Order is by importance, not by DOM. */
.bento{display:grid;gap:8px;padding:8px;border-radius:22px;background:#F3F3F8;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:
    "memory memory"
    "voice  voice"
    "calls  calls"
    "find   find"
    "cal    cal"
    "docs   docs"
    "crew   crew"
    "wave   uptime"
    "tg     tg"}
.bt-a-memory{grid-area:memory} .bt-a-voice{grid-area:voice}
.bt-a-calls{grid-area:calls}   .bt-a-wave{grid-area:wave}
.bt-a-tg{grid-area:tg}         .bt-a-uptime{grid-area:uptime}
.bt-a-find{grid-area:find}     .bt-a-cal{grid-area:cal}
.bt-a-docs{grid-area:docs}     .bt-a-crew{grid-area:crew}

.bt{position:relative;overflow:hidden;border-radius:16px;padding:18px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  min-height:112px}
.bt-h{font-size:16px;font-weight:800;letter-spacing:-.01em}
.bt-p{font-size:13.5px;line-height:1.6;color:var(--muted);max-width:34ch}
.bt-s{font-style:normal;font-size:12.5px;color:var(--muted)}
.bt-big{font-size:clamp(24px,2.6vw,32px);font-weight:900;letter-spacing:-.03em;line-height:1.08}
.bt-a-uptime .bt-big{font-size:clamp(30px,3.4vw,42px);line-height:1}
.bt-ico{color:var(--blue)}
.bt-ico svg{width:24px;height:24px}
.bt-ico-tg{color:#2AABEE}
.bt-txt{gap:10px}
/* icon and title on one line – tiles get shorter */
.bt-top{display:flex;align-items:center;justify-content:center;gap:10px}

/* tiles with a render: the image fills the tile, caption at the bottom left over the scrim */
.bt-shot{padding:0;justify-content:flex-end;align-items:stretch;text-align:left;border-radius:20px;min-height:186px}
.bt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bt-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72%;pointer-events:none;
  background:linear-gradient(to top,#07070C 0%,rgba(7,7,12,.92) 28%,rgba(7,7,12,.6) 58%,transparent 100%)}
.bt-over{position:relative;z-index:1;padding:26px 20px 18px;color:#fff}
.bt-title{font-size:clamp(22px,2.3vw,28px);font-weight:900;letter-spacing:-.02em;line-height:1.15}
.bt-title-s{font-size:clamp(20px,2vw,24px)}

/* --- Telegram tile: caption + chat mockup ---
   Rules come AFTER .bt: specificity is equal, order decides. */
.bt-a-tg{display:block;text-align:left;padding:22px}
.tg-copy .bt-top{justify-content:flex-start}
.tg-copy .bt-p{max-width:30ch}

/* Below desktop – a regular chat in a column: narrow column, messages next to each other.
   Arrows are hidden here: when wrapped they ended up beside the messages and
   pointed right where the conversation flows down. */
.tg-flow{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px;max-width:420px}
.tg-flow .tg-out{align-self:flex-end}
.tg-arrow{display:none}
.tg-msg{max-width:100%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.45}
.tg-in{background:#F2F3F7;color:var(--ink);border-bottom-left-radius:5px}
.tg-out{background:var(--grad);color:#fff;border-bottom-right-radius:5px;
  display:flex;align-items:center;gap:10px}
.tg-arrow{flex:0 0 auto;color:var(--muted);font-size:15px;line-height:1}


.tg-play{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.22)}
.tg-play svg{width:15px;height:15px}
.tg-wave{display:flex;align-items:center;gap:2.5px;height:20px}
.tg-wave i{width:2.5px;border-radius:2px;background:currentColor;opacity:.9}
/* Bar heights cycle through seven values: a waveform without a single inline style,
   otherwise it would not pass the CSP that restricts style-src here. */
.tg-wave i:nth-child(7n+1){height:38%}  .tg-wave i:nth-child(7n+2){height:72%}
.tg-wave i:nth-child(7n+3){height:100%} .tg-wave i:nth-child(7n+4){height:54%}
.tg-wave i:nth-child(7n+5){height:86%}  .tg-wave i:nth-child(7n+6){height:30%}
.tg-wave i:nth-child(7n+7){height:64%}
.tg-dur{flex:0 0 auto;font-size:12px;font-weight:700;opacity:.9}

.tg-file{display:flex;align-items:center;gap:11px}
.tg-doc{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;
  background:#fff;color:var(--blue)}
.tg-doc svg{width:17px;height:17px}
.tg-doc-t{display:flex;flex-direction:column;line-height:1.3}
.tg-doc-t b{font-size:13px;font-weight:800}
.tg-doc-t i{font-style:normal;font-size:11.5px;color:var(--muted)}

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

/* The tile breakpoints are below, after the bento grids: .bt sets padding inside
   its media queries, and with equal specificity the order in the file decides. */
.bt-sub{margin-top:7px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.68)}

/* "Our code": dark tile with scrolling lines of code in the background */
.bt-code{background:#0B0B11;color:#fff;text-align:center;min-height:170px}
.bt-code .bt-p{color:rgba(255,255,255,.74)}
.bt-code .bt-h,.bt-code .bt-p{position:relative;z-index:1}
.bt-matrix{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:radial-gradient(62% 70% at 50% 50%,transparent 12%,#000 88%);
  mask-image:radial-gradient(62% 70% at 50% 50%,transparent 12%,#000 88%)}
/* each column is a line of code rotated vertically; it moves a fixed 320px,
   so there is always text in view at any tile height */
.bt-matrix i{position:absolute;top:-300px;font-family:var(--mono);font-size:13px;
  color:#5EE0C4;opacity:.62;text-shadow:0 0 10px rgba(94,224,196,.35);
  white-space:pre;writing-mode:vertical-rl;letter-spacing:.22em;
  animation:mtx 12s linear infinite}
.bt-matrix i::before{content:"agent.run 01 session 10 sandbox 11 tool.call 0 memory 101 audit 1"}
.bt-matrix i:nth-child(1){left:3%;animation-duration:11s;animation-delay:-1s}
.bt-matrix i:nth-child(2){left:15%;animation-duration:15s;animation-delay:-7s;opacity:.45}
.bt-matrix i:nth-child(3){left:27%;animation-duration:9s;animation-delay:-4s;opacity:.6}
.bt-matrix i:nth-child(4){left:39%;animation-duration:17s;animation-delay:-11s;opacity:.4}
.bt-matrix i:nth-child(5){left:55%;animation-duration:13s;animation-delay:-2s;opacity:.5}
.bt-matrix i:nth-child(6){left:67%;animation-duration:10s;animation-delay:-8s;opacity:.7}
.bt-matrix i:nth-child(7){left:79%;animation-duration:16s;animation-delay:-5s;opacity:.42}
.bt-matrix i:nth-child(8){left:91%;animation-duration:12s;animation-delay:-13s;opacity:.62}
@keyframes mtx{from{transform:translateY(0)}to{transform:translateY(320px)}}
@media(prefers-reduced-motion:reduce){.bt-matrix i{animation:none}}

.bt-a-wave{gap:16px}
.bt-wave{width:min(220px,82%);height:auto}

.bt-status2{flex-direction:row;gap:12px;padding:16px 20px;min-height:0;background:#fff}
.bt-status2{text-align:left}
.bt-status2 .bt-h{font-size:14.5px;line-height:1.25}
/* on desktop the name and number are on one line, on narrow screens on two */
.st-txt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.st-num{font-family:var(--mono);font-size:11.5px;font-style:normal;letter-spacing:.04em;color:var(--muted)}
@media(max-width:560px){.st-txt{display:block}.st-num{display:block;margin-top:3px}}

/* soft hover response */
@media(hover:hover){
  .bt{transition:transform var(--dur),box-shadow var(--dur)}
  .bt:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,20,45,.10)}
}

/* Tablet: two columns, priority is kept.
   IMPORTANT: all ten tiles are listed. There used to be six here, and find, cal,
   docs and crew were left without an area – the browser scattered them across implicit
   columns, and at 620–959px the grid broke into four tracks, one of them zero-width. */
@media(min-width:620px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;border-radius:28px;
    grid-template-areas:
      "memory memory"
      "voice  calls"
      "find   cal"
      "docs   crew"
      "wave   uptime"
      "tg     tg"}
  .bt{padding:22px;min-height:130px;border-radius:18px}
  .bt-shot{min-height:230px;border-radius:24px}
  .bt-over{padding:34px 26px 24px}
}
/* desktop: full 6-column bento */
@media(min-width:960px){
  .bento{grid-template-columns:repeat(6,minmax(0,1fr));border-radius:32px;
    grid-template-areas:
      "memory memory memory voice  voice  voice"
      "memory memory memory calls  calls  calls"
      "find   find   wave   wave   cal    cal"
      "docs   docs   uptime uptime crew   crew"
      "tg     tg     tg     tg     tg     tg"}
  .bt{padding:26px}
  .bt-shot{min-height:0}
  .bt-a-memory{min-height:330px}
}

/* Telegram tile, tablet and up: caption on the left, chat on the right.
   Otherwise the chat hugs the left side and the right half of the tile stays empty. */
@media(min-width:620px){
  /* The left offset equals the caption offset in "Remembers everything" (tile padding + scrim
     padding): the content of both tiles lines up on the same vertical. */
  .bt-a-tg{display:grid;grid-template-columns:236px minmax(0,1fr);gap:30px;align-items:center;
    padding:24px 48px}
  .tg-flow{margin-top:0}
  .tg-copy{padding-left:20px}     /* caption shifted right, as requested */
  .tg-copy .bt-p{max-width:none}
}
/* Desktop: the chain stretches into a row, arrows appear between the messages.
   The inner tile grid mirrors the bento – the same six columns and the same gap.
   The caption takes the first two and is centred in them, so its axis lines up
   with the axis of "Finds and verifies" and "Documents" above: no pixel tweaking,
   at any screen width. */
@media(min-width:960px){
  .bt-a-tg{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:24px 0}
  .tg-copy{grid-column:1/3;padding-left:0;text-align:center}
  .tg-copy .bt-top{justify-content:center}
  .tg-flow{grid-column:3/-1;flex-direction:row;align-items:center;justify-content:flex-end;
    gap:12px;max-width:none;padding-right:52px}
  .tg-flow .tg-out{align-self:auto}
  .tg-arrow{display:block}
}

/* ============ MOBILE ============ */
/* Principle: each block reads in roughly one phone screen (375×812).
   The main lever: rows of cards turn into horizontal carousels,
   so instead of N stacked cards the block height becomes "one card". */
@media(max-width:860px){
  /* single vertical rhythm: one value for all sections */
  section{padding:40px 0}
  .hero{padding:26px 0 34px}
  .sec-head{margin-bottom:22px}
  .sec-sub{margin-top:12px;font-size:15.5px}
  .dbr{display:inline}


  /* First screen order as in the singidun.com slider:
     title → lead → mascot → buttons. The buttons sit under the mascot
     instead of breaking the "text ↔ paperclip" pairing. */
  .hero-in{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-copy{display:contents}
  /* font size chosen so that "Ashad – AI concierge," fits on one line
     down to 360px; the <br> break is kept, as on desktop */
  .hero-copy h1{order:1;margin-top:0;font-size:min(8.2vw,34px)}
  .hero-lead{order:2;margin-top:14px}
  .hero-visual{order:3;margin-top:20px}
  .hero-cta{order:4;margin-top:20px;gap:10px}
  .lead-tail{display:none}
  .hero-visual{flex-direction:column;align-items:center}
  .hero-mascot{width:120px;margin-top:0}
  /* position:relative, NOT static: the ::before/::after tails are positioned
     absolutely, and with static they attach to .hero-visual and slide under the paperclip */
  .speech{position:relative;inset:auto;max-width:min(330px,94%);margin:0 auto 14px;animation:none}
  .speech::before{left:calc(50% - 16px)}
  .speech::after{left:calc(50% - 13px)}

  .swipe-hint{display:inline}

  /* --- card rows -> full-screen-width carousel --- */
  .card-row,.mf-grid,.team-row,.secshots{
    display:flex;grid-template-columns:none;gap:12px;
    margin:0 -24px;padding:2px 24px 8px;              /* break out of the .wrap padding, edge to edge */
    overflow-x:auto;overflow-y:hidden;                /* overflow-y:hidden – otherwise auto on X also enables Y */
    scroll-snap-type:x mandatory;scroll-padding-left:24px;
    -webkit-overflow-scrolling:touch}
  .card-row::-webkit-scrollbar,.mf-grid::-webkit-scrollbar,
  .team-row::-webkit-scrollbar,.secshots::-webkit-scrollbar{display:none}
  .card-row>*,.mf-grid>*,.team-row>*,.secshots>*{
    flex:0 0 80vw;min-width:0;scroll-snap-align:start}
  /* Scroll reveal is disabled entirely inside carousels.
     A shift would stretch the scroll container, and opacity turned out worse:
     cards past the right screen edge never entered the observer's view
     and stayed invisible even after being swiped into view.
     The whole row reveals on vertical scroll, the cards inside it immediately. */
  .card-row>.rv,.mf-grid>.rv,.team-row>.rv,.secshots>.rv{transform:none;opacity:1}
  .cdots{display:flex}

  .mf-grid>*{flex:0 0 74vw}
  .team-row>*{flex:0 0 68vw}
  .secshots{margin-bottom:14px}
  .secshots>*{flex:0 0 76vw}



  /* two identical status badges must start from the same vertical */
  .bt-status2{justify-content:flex-start}
}
@media(max-width:560px){
  .sec-never{padding:26px 22px 24px}
  .sec-never-items{grid-template-columns:1fr}
  .hero-cta .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}