:root {
  --portfolio-ink: #0b1739;
  --portfolio-blue: #2354d8;
  --portfolio-blue-dark: #163b9f;
  --portfolio-cyan: #18b8d9;
  --portfolio-paper: #f4f7ff;
  --portfolio-ring: rgba(35, 84, 216, 0.24);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 10% 8%, rgba(24,184,217,.10), transparent 24rem),
    linear-gradient(180deg, #f8faff 0%, var(--portfolio-paper) 100%);
}

/* Portfolio home */
.site-header-inner { max-width:1120px !important; min-height:64px; }
.site-logo { font-size:1rem !important; letter-spacing:.025em; }
.site-nav a {
  min-height:38px;
  display:inline-flex;
  align-items:center;
  padding:0 11px;
  border-radius:10px;
  font-size:.875rem !important;
}
.site-nav a:hover { background:rgba(255,255,255,.09); }

.site-header + .hero { padding-top:96px !important; padding-bottom:124px !important; }
.hero-badge { backdrop-filter:blur(8px); }
.hero-inner { max-width:760px !important; }
.hero-inner h1 { font-size:clamp(2.5rem,6vw,4.4rem) !important; letter-spacing:-.035em !important; }
.hero-inner p { font-size:1.05rem !important; max-width:630px !important; }

.hero + .stats-bar {
  width:min(980px,calc(100% - 40px));
  margin:-44px auto 0;
  position:relative;
  z-index:4;
  overflow:hidden;
  border:1px solid rgba(35,84,216,.12);
  border-radius:20px;
  box-shadow:0 22px 50px rgba(11,23,57,.16);
}
.stats-inner { padding:14px 20px !important; }
.stat-item + .stat-item { border-left:1px solid #e5eaf6; }
.stat-num { font-size:1.65rem !important; }
.stat-label { font-size:.8rem !important; }

.section { padding-top:80px !important; }
.section-head { margin-bottom:38px !important; }
.section-head p { font-size:1rem !important; }
.tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:26px !important; }
.tool-card { border-radius:24px !important; }
.tool-card:last-child { grid-column:1 / -1; display:grid; grid-template-columns:minmax(250px,.78fr) 1.22fr; }
.tool-card:last-child .tool-card-thumb { height:100% !important; min-height:220px; }
.tool-card-thumb { height:178px !important; font-size:4.3rem !important; }
.tool-card-body { padding:26px !important; }
.tool-card h3 { font-size:1.18rem !important; }
.tool-card p { font-size:.95rem !important; }
.tool-card-footer { gap:12px !important; }
.btn-tool-detail,.btn-tool-launch { padding:11px 12px !important; font-size:.9rem !important; }
.about-wrap { border-radius:24px !important; }
.about-text p { font-size:1rem !important; }
.skill-tag { font-size:.84rem !important; }
.cs-section { border-radius:26px !important; box-shadow:0 24px 55px rgba(11,23,57,.2); }

/* Case-study pages */
.breadcrumb {
  max-width:1120px !important;
  padding:18px 22px !important;
  font-size:.82rem !important;
}
.breadcrumb a { font-weight:800; }
.breadcrumb + .hero {
  width:min(1120px,calc(100% - 40px));
  margin:0 auto;
  padding:52px 38px 58px !important;
  border:1px solid rgba(255,255,255,.16);
  border-radius:28px;
  box-shadow:0 28px 70px rgba(11,23,57,.22);
}
.breadcrumb + .hero .hero-emoji {
  width:76px;
  height:76px;
  margin:0 auto 18px;
  display:grid !important;
  place-items:center;
  border:1px solid rgba(255,255,255,.34);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.09));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 14px 28px rgba(0,0,0,.18);
}
.breadcrumb + .hero h1 { font-size:clamp(2rem,4vw,3.1rem) !important; letter-spacing:-.025em !important; }
.breadcrumb + .hero > p { font-size:1rem !important; max-width:680px !important; }
.content { max-width:1060px !important; padding-bottom:96px !important; }
.content > .card:first-child { margin-top:34px !important; }
.content > .card {
  margin-bottom:28px !important;
  padding:36px 40px !important;
  border-radius:22px !important;
}
.card-title {
  margin-bottom:24px !important;
  padding-bottom:16px;
  border-bottom:1px solid #e7ecf7;
  font-size:1.24rem !important;
}
.card-title-icon {
  width:42px !important;
  height:42px !important;
  border-radius:13px !important;
  box-shadow:inset 0 0 0 1px rgba(35,84,216,.1);
}
.feature-grid,.tech-grid { gap:16px !important; }
.feature-item,.tech-item,.other-tool-item {
  background:linear-gradient(145deg,#fff,#f5f8ff) !important;
  border-color:#dbe4f6 !important;
  border-radius:16px !important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease !important;
}
.feature-item:hover,.tech-item:hover,.other-tool-item:hover {
  transform:translateY(-3px);
  border-color:#aec4f2 !important;
  box-shadow:0 12px 26px rgba(11,23,57,.08);
}
.feature-item p,.step-body p,.tech-item p { font-size:.92rem !important; }
.feature-item h4,.step-body h4,.tech-item h4 { font-size:.98rem !important; }
.user-tag { font-size:.9rem !important; }
.spec-table { font-size:.95rem !important; }
.spec-table th { font-size:.88rem !important; }
.cta-box {
  border-radius:24px !important;
  box-shadow:0 22px 50px rgba(11,23,57,.18);
}
.site-footer { background:#07132f !important; }

a:focus-visible, button:focus-visible {
  outline: 4px solid var(--portfolio-ring);
  outline-offset: 3px;
}

.site-header {
  background: rgba(11, 23, 57, .94) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-logo { display:flex; align-items:center; gap:.5rem; }
.site-nav a { color:#dbeafe !important; }
.site-nav a:hover { color:#fff !important; }

.hero {
  background:
    radial-gradient(circle at 78% 18%, rgba(24,184,217,.36), transparent 20rem),
    linear-gradient(135deg, #091838, #173d9a 54%, #2459d7) !important;
}
.hero h1 { text-wrap: balance; text-shadow: 0 3px 18px rgba(0,0,0,.18); }
.hero p { text-wrap: pretty; }

.tool-card, .card, .about-wrap {
  border: 1px solid rgba(35,84,216,.14) !important;
  box-shadow: 0 16px 45px rgba(11,23,57,.10) !important;
}
.tool-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 24px 56px rgba(11,23,57,.17) !important;
}

.btn-hero-main,
.btn-hero-sub,
.btn-tool-detail,
.btn-tool-launch,
.hero-btn,
.btn-cta,
.btn-cs {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 13px !important;
  letter-spacing: .015em;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease !important;
  box-shadow: 0 6px 0 rgba(7, 20, 54, .28), 0 12px 24px rgba(7,20,54,.20) !important;
}
.btn-tool-launch, .hero-btn, .btn-cta {
  color:#fff !important;
  background: linear-gradient(180deg, #3c73ee 0%, #2455d8 55%, #173da8 100%) !important;
  border-color:#5c89ed !important;
  text-shadow:0 1px 1px rgba(0,0,0,.22);
}
.btn-tool-detail {
  color:#173da8 !important;
  background: linear-gradient(180deg, #fff 0%, #e7efff 100%) !important;
  border-color:#b7c9f6 !important;
  box-shadow: 0 5px 0 #b5c5eb, 0 11px 22px rgba(11,23,57,.12) !important;
}
.btn-hero-main, .btn-cs-white {
  color:#173da8 !important;
  background:linear-gradient(180deg,#fff,#eaf1ff) !important;
  box-shadow:0 6px 0 #b9c9ee,0 13px 25px rgba(0,0,0,.2) !important;
}
.btn-hero-sub, .btn-cs-border {
  color:#fff !important;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.10)) !important;
  box-shadow:0 6px 0 rgba(0,0,0,.18),0 13px 25px rgba(0,0,0,.18) !important;
}
.btn-hero-main:hover, .btn-hero-sub:hover, .btn-tool-detail:hover,
.btn-tool-launch:hover, .hero-btn:hover, .btn-cta:hover, .btn-cs:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04);
}
.btn-hero-main:active, .btn-hero-sub:active, .btn-tool-detail:active,
.btn-tool-launch:active, .hero-btn:active, .btn-cta:active, .btn-cs:active {
  transform: translateY(4px) !important;
  box-shadow:0 2px 0 rgba(7,20,54,.26),0 5px 12px rgba(7,20,54,.16) !important;
}

.portfolio-proof {
  max-width: 1100px;
  margin: -36px auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 3;
}
.portfolio-proof-inner {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  overflow:hidden;
  border:1px solid rgba(35,84,216,.15);
  border-radius:18px;
  background:#dce5fa;
  box-shadow:0 18px 45px rgba(11,23,57,.14);
}
.proof-item { background:#fff; padding:20px; text-align:center; }
.proof-item strong { display:block; color:var(--portfolio-blue); font-size:1.25rem; }
.proof-item span { color:#64748b; font-size:.82rem; }

.quiz-demo { margin-top: 28px; padding: 24px; border:1px solid #cfdbf7; border-radius:16px; background:#f8faff; }
.quiz-demo-kicker { margin:0 0 6px; color:#2354d8; font-size:.78rem; font-weight:900; letter-spacing:.08em; }
.quiz-demo h3 { margin:0 0 16px; color:#111f44; font-size:1.08rem; }
.quiz-options { display:grid; gap:10px; }
.quiz-option {
  width:100%; min-height:48px; padding:12px 16px; text-align:left; cursor:pointer;
  border:1px solid #b9c9ed; border-radius:12px; background:linear-gradient(180deg,#fff,#eaf1ff);
  color:#172554; font:inherit; font-weight:800;
  box-shadow:0 4px 0 #b9c9ed,0 8px 16px rgba(11,23,57,.08);
  transition:transform .14s ease,box-shadow .14s ease,background .18s ease,color .18s ease;
}
.quiz-option:hover { transform:translateY(-1px); }
.quiz-option:active { transform:translateY(3px); box-shadow:0 1px 0 #b9c9ed; }
.quiz-option.is-correct { color:#fff; border-color:#0f8c56; background:linear-gradient(180deg,#23b978,#118956); box-shadow:0 4px 0 #086c43; }
.quiz-option.is-wrong { color:#fff; border-color:#be2d3c; background:linear-gradient(180deg,#ed5b67,#c83240); box-shadow:0 4px 0 #97232f; }
.quiz-option:disabled { cursor:default; }
.quiz-feedback { min-height:1.7em; margin:16px 0 0; font-weight:900; }
.quiz-feedback.correct { color:#087443; }
.quiz-feedback.wrong { color:#b42332; }

@media (max-width: 720px) {
  .site-header-inner { gap:12px; align-items:flex-start !important; }
  .site-nav { gap:12px !important; flex-wrap:wrap; justify-content:flex-end; }
  .portfolio-proof-inner { grid-template-columns:1fr; }
  .proof-item { padding:14px; }
  .tool-card-footer { flex-direction:column; }
  .btn-tool-detail, .btn-tool-launch { width:100%; }
  .site-header + .hero { padding-top:72px !important; padding-bottom:96px !important; }
  .hero-inner h1 { font-size:clamp(2.2rem,12vw,3.2rem) !important; }
  .tools-grid { grid-template-columns:1fr !important; }
  .tool-card:last-child { grid-column:auto; display:flex; }
  .tool-card:last-child .tool-card-thumb { height:178px !important; min-height:0; }
  .stat-item + .stat-item { border-left:0; }
  .breadcrumb + .hero { width:calc(100% - 24px); padding:40px 20px 48px !important; border-radius:22px; }
  .content { padding-left:12px !important; padding-right:12px !important; }
  .content > .card { padding:25px 20px !important; border-radius:18px !important; }
  .spec-table th,.spec-table td { padding:11px 10px !important; }
}

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