:root{
  --primary:#0055FF;
  --secondary:#444444;
  --violet:#7B5CFF;
  --amber:#FF9F1C;
  --teal:#00C2A8;
  --ink:#0B0F19;
  --paper:#FFFFFF;
  --tint:#F0F4FF;
  --line:#E4E9F5;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; margin:0; letter-spacing:-0.015em; }
a{ color:inherit; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; }

.wrap{ margin:0 auto; padding:0 28px; }
.wrap-wide{ max-width:1040px; margin:0 auto; padding:0 28px; }

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

header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:20px 0;
}
header .wrap-wide{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:inline-flex; align-items:center; }
.brand img{ height:28px; width:auto; display:block; }
nav a{ text-decoration:none; color:var(--secondary); font-size:14px; font-weight:500; margin-left:28px; }
nav a:hover{ color:var(--primary); }

footer{ padding:32px 0; color:var(--secondary); font-size:13px; margin-top:48px; }
footer .wrap-wide{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
footer a{ color:var(--primary); text-decoration:none; }
footer a:hover{ text-decoration:underline; }

/* ---------- Back link ---------- */

.back{ padding-top:10px; margin-bottom:15px; }
.back a{ text-decoration:none; font-size:14px; font-weight:500; color:var(--secondary); }
.back a:hover{ color:var(--primary); }

/* ---------- Shared hero blob / reveal ---------- */

.hero{ position:relative; overflow:hidden; }

.hero-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(6px);
  animation:drift 22s ease-in-out infinite alternate;
  pointer-events:none;
  background:radial-gradient(circle at 35% 35%, rgba(0,85,255,0.20), rgba(123,92,255,0.14) 45%, rgba(255,255,255,0) 72%);
}

@keyframes drift{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(-30px, 40px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce){ .hero-blob{ animation:none; } }

@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
.reveal{ opacity:0; transform:translateY(16px); animation:rise .75s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal.d1{ animation-delay:.1s; }
@media (prefers-reduced-motion: reduce){ .reveal{ animation:none; opacity:1; transform:none; } }

.gradient-text{
  background:linear-gradient(100deg, var(--ink) 30%, var(--primary) 78%, var(--violet) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.kind-chip{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  color:var(--primary);
  background:var(--tint);
  border:1px solid #D7E1FF;
  border-radius:100px;
  padding:6px 14px;
}

/* ============ LISTING PAGE ============ */

.listing-hero{ padding:80px 0 64px; }
.listing-hero .hero-blob{ top:-240px; left:-220px; width:640px; height:640px; }

.listing-hero h1{
  font-size:clamp(38px, 6vw, 58px);
  font-weight:700;
  line-height:1.08;
}

.listing-hero p{
  color:var(--secondary);
  font-size:18px;
  margin-top:22px;
}

.studies{ padding:8px 0 80px; }

.search-bar{
  display:flex; align-items:center; gap:10px;
  border:1px solid #D7E1FF; border-radius:100px;
  padding:14px 20px; margin-top:15px; margin-bottom:28px;
  background:var(--tint);
  box-shadow:0 10px 24px -16px rgba(0,85,255,0.35);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.search-bar:focus-within{ background:var(--paper); border-color:var(--primary); box-shadow:0 0 0 4px rgba(0,85,255,0.14); }
.search-icon{ color:var(--primary); flex:none; }
.search-bar input{
  border:none; outline:none; background:none; flex:1;
  font-size:15px; color:var(--ink); font-family:inherit;
}
.search-bar input::placeholder{ color:var(--secondary); }

.study{
  padding:36px;
  margin-top:24px;
  border-radius:20px;
  border:1px solid var(--line);
  display:grid;
  gap:16px;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  background: linear-gradient(135deg, #ebf0ff, #ffffff 55%, #f7f5ff);
}
.study:first-child{ margin-top:0; }
.study:hover{ border-color:transparent; box-shadow:0 20px 40px -22px rgba(11,15,25,0.22); transform:translateY(-2px); }

.study-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.study-name{ font-size:clamp(21px, 3vw, 27px); font-weight:700; }
.study-kind{ font-size:13px; font-weight:600; color:var(--primary); background:var(--tint); border:1px solid #D7E1FF; border-radius:100px; padding:5px 12px; white-space:nowrap; }
.study-desc{ color:var(--secondary); font-size:15.5px; }
.study-meta{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-top:4px; }

.result{ text-align:right; }
.result .num{ font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size:24px; font-weight:700; display:block; line-height:1.1; }
.result .label{ font-size:12.5px; color:var(--secondary); }

.read{ font-weight:600; font-size:14.5px; display:inline-flex; align-items:center; gap:6px; }

.study.c1 .tag{ background:var(--tint); color:#0044CC; border:1px solid #D7E1FF; }
.study.c2 .tag{ background:#F1EEFF; color:#5B3FE0; border:1px solid #DED6FF; }
.study.c3 .tag{ background:#FFF3E2; color:#B8730A; border:1px solid #FFE1B8; }
.study.c4 .tag{ background:#E3FBF7; color:#00897A; border:1px solid #C2F3EA; }
.study.c1 .result .num, .study.c1 .read{ color:var(--primary); }
.study.c2 .result .num, .study.c2 .read{ color:var(--violet); }
.study.c3 .result .num, .study.c3 .read{ color:var(--amber); }
.study.c4 .result .num, .study.c4 .read{ color:var(--teal); }

/* ============ DETAIL PAGE ============ */

.detail-hero{ padding:0px 0 0px; }
.detail-hero .hero-blob{ top: 0px; right:-200px; width:760px; height:760px; }

.hero-grid{ position:relative; display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center; }

.detail-hero h1{
  font-size:clamp(30px, 4.2vw, 46px);
  font-weight:700;
  line-height:1.15;
  margin-top:20px;
}

.detail-hero .dek{ font-size:17px; color:var(--secondary); max-width:58ch; margin-top:20px; }

.facts{ display:flex; flex-wrap:wrap; gap:28px; margin-top:30px; }
.fact .label{ font-size:12.5px; color:var(--secondary); display:block; }
.fact .value{ font-size:14.5px; font-weight:600; margin-top:3px; }

/* Hero visual mock */

.mock{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 48px -20px rgba(11,15,25,0.18); padding:18px; }
.mock-head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.mock-dot{ width:8px; height:8px; border-radius:50%; }
.mock-dot.b{ background:var(--primary); }
.mock-dot.v{ background:var(--violet); }
.mock-dot.a{ background:var(--amber); }
.mock-label{ font-size:12px; color:var(--secondary); margin-left:6px; font-weight:600; }

.live-dot{ width:7px; height:7px; border-radius:50%; background:#FF3B30; animation:livepulse 1.4s ease-in-out infinite; }
@keyframes livepulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
@media (prefers-reduced-motion: reduce){ .live-dot{ animation:none; } }
.live-label{ font-size:11px; font-weight:800; color:#FF3B30; letter-spacing:0.04em; margin-left:2px; }
.live-session{ padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:2px 0 12px; }
.live-session-title{ display:block; font-size:13px; font-weight:700; color:var(--ink); }
.live-viewers{ display:block; font-size:12px; color:var(--secondary); margin-top:3px; }

.bubble{ border-radius:12px; padding:12px 14px; font-size:13.5px; line-height:1.45; margin-bottom:10px; max-width:88%; }
.bubble.user{ background:var(--tint); color:var(--ink); margin-left:auto; border-bottom-right-radius:4px; }
.bubble.ai{ background:linear-gradient(150deg, var(--primary), var(--violet)); color:#fff; border-bottom-left-radius:4px; }
.bubble.ai .cite{ display:block; margin-top:8px; font-size:11.5px; color:rgba(255,255,255,0.8); font-weight:600; }

.bar-chart{ display:flex; align-items:flex-end; gap:8px; height:76px; margin-bottom:16px; padding:0 2px; }
.bar{ flex:1; border-radius:5px 5px 0 0; background:linear-gradient(180deg, var(--primary), var(--violet)); opacity:0.9; }
.bar.light{ background:var(--tint); border:1px solid #D7E1FF; opacity:1; }

.kpi-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
.kpi-row:first-of-type{ border-top:none; }
.kpi-row .k-label{ color:var(--secondary); }
.kpi-row .k-value{ font-weight:700; color:var(--primary); }
.kpi-row .k-value.v2{ color:var(--teal); }

.room-chip{
  display:inline-block; font-size:11.5px; font-weight:600; padding:5px 11px;
  border-radius:100px; margin:0 6px 8px 0; border:1px solid var(--line); color:var(--secondary);
}
.room-chip.active{ background:linear-gradient(135deg, var(--primary), var(--violet)); color:#fff; border-color:transparent; }
 
.slot-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; margin:12px 0 16px; }
.slot{ height:22px; border-radius:5px; background:var(--tint); border:1px solid #D7E1FF; }
.slot.booked{ background:#E4E9F5; border-color:var(--line); }
.slot.selected{ background:linear-gradient(135deg, var(--primary), var(--violet)); border-color:transparent; }

/* Results strip */

.results{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin:52px 0; }
.result-cell{ position:relative; border-radius:18px; padding:26px 24px; color:#fff; overflow:hidden; }
.result-cell.one{ background:linear-gradient(135deg, var(--primary), #2E7BFF 55%, var(--violet)); }
.result-cell.two{ background:linear-gradient(135deg, var(--violet), #5B7CFF 55%, var(--primary)); }
.result-cell .num{ font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size:34px; font-weight:700; display:block; line-height:1.1; }
.result-cell .title{ font-size:14.5px; font-weight:600; margin-top:8px; display:block; }
.result-cell .label{ font-size:13px; color:rgba(255,255,255,0.85); margin-top:4px; display:block; }

/* Body content */

.content{ padding:8px 0 60px; }
.content h2{ font-size:23px; font-weight:700; margin-top:56px; }
.content h2:first-child{ margin-top:0; }
.content p{ margin-top:16px; color:var(--ink); }
.content p + p{ margin-top:14px; }

.feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin-top:20px; }
.feature{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; }
.feature-dot{ width:7px; height:7px; border-radius:2px; flex:none; margin-top:7px; }

/* Approach timeline */

.approach{ position:relative; margin-top:28px; padding-left:8px; }
.approach::before{
  content:""; position:absolute; left:29px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(var(--primary), var(--violet)); opacity:0.35;
}
.approach-item{ position:relative; display:grid; grid-template-columns:44px 1fr; gap:16px; margin-top:30px; }
.approach-item:first-child{ margin-top:0; }
.approach-num{
  position:relative; z-index:1; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size:15px; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--violet));
}
.approach-title{ font-size:16px; font-weight:700; padding-top:8px; }
.approach-desc{ font-size:14.5px; color:var(--secondary); margin-top:6px;}

/* Systems / tech layers */

.tech-layer{ margin-top:22px; }
.tech-layer:first-child{ margin-top:24px; }
.tech-layer-name{ font-size:13px; color:var(--ink); font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.tech-layer-name::before{ content:""; width:10px; height:10px; border-radius:3px; }

.tech-layer.frontend .tech-layer-name::before{ background:var(--primary); }
.tech-layer.backend .tech-layer-name::before{ background:var(--violet); }
.tech-layer.auth .tech-layer-name::before{ background:var(--amber); }
.tech-layer.infra .tech-layer-name::before{ background:var(--teal); }

.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{ font-size:13px; font-weight:600; border-radius:100px; padding:6px 14px; }
.tech-layer.frontend .tag{ background:var(--tint); color:#0044CC; border:1px solid #D7E1FF; }
.tech-layer.backend .tag{ background:#F1EEFF; color:#5B3FE0; border:1px solid #DED6FF; }
.tech-layer.auth .tag{ background:#FFF3E2; color:#B8730A; border:1px solid #FFE1B8; }
.tech-layer.infra .tag{ background:#E3FBF7; color:#00897A; border:1px solid #C2F3EA; }

/* Quote */

.quote-wrap{ margin:52px 0 0; border-radius:20px; overflow:hidden; }
blockquote{
  position:relative; margin:0; padding:36px 32px;
  background:linear-gradient(135deg, var(--primary), var(--violet)); color:#e5ecff;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size:19px; font-weight:600; line-height:1.5;
}
blockquote::before{
  content:"\201C"; position:absolute; top:6px; left:20px; font-size:90px;
  color:rgba(255,255,255,0.16); font-family:Georgia, serif; line-height:1;
}
.content blockquote p{ position:relative; color:#e5ecff; }
blockquote cite{ display:block; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-style:normal; font-weight:600; font-size:13.5px; color:rgba(255,255,255,0.82); margin-top:16px; }

/* Why grid */

.why-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:24px; }
.why-item{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px 22px; border-top:3px solid var(--primary); }
.why-item:nth-child(2){ border-top-color:var(--violet); }
.why-item:nth-child(3){ border-top-color:var(--amber); }
.why-title{ font-size:15px; font-weight:700; }
.why-desc{ font-size:13.5px; color:var(--secondary); margin-top:8px; line-height:1.55; }

/* CTA */

.cta{
  background:linear-gradient(120deg, #0A1230, #131B3E 55%, #1B1440);
  padding:68px 0; border-radius:24px; margin:0 28px 0; max-width:1040px; margin-inline:auto;
}
.cta-inner{ padding:0 40px; text-align:left; }
.cta h2{ font-size:clamp(26px, 3.6vw, 36px); font-weight:700; color:#fff; max-width:36ch; }
.cta p{ color:rgba(255,255,255,0.72); margin-top:12px; font-size:15.5px; }
.cta-btn{
  display:inline-block; margin-top:24px; background:linear-gradient(135deg, var(--primary), var(--violet));
  color:#fff; text-decoration:none; font-weight:700; font-size:15px; padding:14px 28px; border-radius:100px;
  transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 10px 24px -10px rgba(0,85,255,0.6);
}
.cta-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(0,85,255,0.7); }

/* Loading / error states */

.state-msg{ padding:80px 28px; text-align:center; color:var(--secondary); font-size:15px; }
.state-msg a{ color:var(--primary); font-weight:600; text-decoration:none; }
.state-msg a:hover{ text-decoration:underline; }

@media (max-width: 760px){
  .hero-grid{ grid-template-columns:1fr; }
  .mock{ max-width:420px; }
  .results{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .cta{ margin:0 16px; }
  .cta-inner{ padding:0 24px; }
  nav a{ margin-left:16px; }
}

@media (max-width: 640px){
  .study-meta{ flex-direction:column; align-items:flex-start; }
  .result{ text-align:left; }
}