/* Detail page styles + OS open/close animation */

/* ─── view router + animation ─── */
:root{
  --ox: 50%;
  --oy: 50%;
}
.view-stack{
  position: relative;
  isolation: isolate;
}
.home-view{
  transform-origin: var(--ox) var(--oy);
  transition: transform .55s cubic-bezier(0.32, 0.72, 0.35, 1), opacity .35s ease, filter .35s ease;
  will-change: transform, opacity;
}
.home-view.minimized{
  transform: scale(0.3);
  opacity: 0;
  filter: blur(8px);
  pointer-events: none;
}

.detail-view{
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--paper);
  transform-origin: var(--ox) var(--oy);
  transform: scale(0.22);
  opacity: 0;
  border-radius: 22px;
  transition: transform .6s cubic-bezier(0.32, 0.72, 0.35, 1),
              opacity .4s ease,
              border-radius .6s ease;
  box-shadow: 0 0 80px rgba(0,0,0,0.35);
}
.detail-view.open{
  transform: scale(1);
  opacity: 1;
  border-radius: 0;
}
.detail-view.leaving{
  transform: scale(0.22);
  opacity: 0;
  border-radius: 22px;
  overflow: hidden;
  transition: transform .45s cubic-bezier(0.55, 0, 0.5, 1),
              opacity .35s ease,
              border-radius .45s ease;
}

/* lock scroll on body when detail open */
body.detail-open{ overflow: hidden; }

/* ─── product top bar (replaces OS bar in detail view) ─── */
.detail-bar{
  position: sticky; top: 0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 18px;
  background: var(--p-color, var(--ink));
  color: var(--p-txt, var(--paper));
  border-bottom: 1px solid rgba(0,0,0,0.18);
}
.detail-bar .lights{ display:flex; gap: 7px; align-items:center; }
.detail-bar .lights .lt{ width: 12px; height: 12px; border-radius: 999px; border: 0.5px solid rgba(0,0,0,0.18); position:relative; }
.detail-bar .lights .lt.r{ background:#ff5f57; }
.detail-bar .lights .lt.y{ background:#febc2e; }
.detail-bar .lights .lt.g{ background:#28c840; }
.detail-bar .lights .lt::after{ content:""; position:absolute; inset:0; background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.55), transparent 60%); border-radius:inherit; }
.detail-bar .lights .lt.r{ cursor: pointer; }
.detail-bar .lights .lt.r:hover::before{
  content:"×"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#4d0500; font-size: 10px; font-weight:700; z-index: 2;
}
.detail-bar .title{ display:flex; align-items:center; gap: 12px; font-family: var(--f-mono); font-size: 12px; opacity: 0.95; flex: 1; padding-left: 14px; }
.detail-bar .title b{ font-family: var(--f-display); font-weight: 600; font-size: 15px; opacity: 1; }
.detail-bar .crumb{ display:inline-flex; align-items:center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.16); cursor: pointer; transition: background .12s; }
.detail-bar .crumb:hover{ background: rgba(0,0,0,0.28); }
.detail-bar .right{ display:flex; gap: 16px; align-items:center; font-family: var(--f-mono); font-size: 12px; }
.detail-bar .right kbd{ font-family: var(--f-mono); font-size: 11px; padding: 1px 5px; border:1px solid currentColor; opacity:0.7; border-radius: 4px; }
.detail-bar .right .kbar{
  display:flex; align-items:center; gap: 6px;
  padding: 4px 10px; border-radius: 8px;
  background: rgba(0,0,0,0.16); cursor: pointer;
}
.detail-bar .right .kbar:hover{ background: rgba(0,0,0,0.28); }

/* ─── detail hero ─── */
.d-hero{
  position: relative;
  padding: 64px 32px 40px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--p-color), white 86%), var(--paper));
  overflow: hidden;
}
.d-hero .inner{ max-width: 1280px; margin: 0 auto; display:grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.d-hero .eye{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.d-hero h1{
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.025em;
  font-size: 88px; line-height: 0.98; margin: 14px 0 18px;
}
.d-hero h1 .accent{ color: var(--p-color); }
.d-hero h1 .accent.under{ position: relative; display:inline-block; }
.d-hero h1 .accent.under::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:-6px; height: 14px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 7 Q 30 2 60 6 T 120 7 T 198 5' stroke='currentColor' fill='none' stroke-width='2.8' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}
.d-hero p.lead{ font-size: 19px; color: var(--ink-2); max-width: 540px; line-height: 1.5; margin: 0 0 24px; }
.d-hero .cta-row{ display:flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.d-hero .stat-row{ display:flex; gap: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.d-hero .stat{ }
.d-hero .stat .v{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; font-size: 38px; line-height: 1; color: var(--p-color); }
.d-hero .stat .k{ font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin-top: 6px; }
.d-hero .stat .n{ font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* primary cta - product colored */
.btn.primary{
  background: var(--p-color);
  color: var(--p-txt);
  border-color: var(--p-color);
}
.btn.primary:hover{ filter: brightness(0.95); }

/* hero demo window */
.d-demo{
  width: 100%;
  background: var(--paper);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.3), 0 8px 24px -8px rgba(0,0,0,0.2);
  overflow: hidden;
}
.d-demo .bar{
  display:flex; align-items:center; padding: 9px 14px;
  background: var(--p-color); color: var(--p-txt);
  border-bottom: 1px solid rgba(0,0,0,0.18);
}
.d-demo .bar .lt{ width:12px; height:12px; border-radius:999px; margin-right: 7px; border: 0.5px solid rgba(0,0,0,0.18); }
.d-demo .bar .lt.r{ background:#ff5f57; }
.d-demo .bar .lt.y{ background:#febc2e; }
.d-demo .bar .lt.g{ background:#28c840; }
.d-demo .bar .url{ flex:1; margin-left: 14px; font-family: var(--f-mono); font-size: 12px; opacity: 0.9; }
.d-demo .body{ padding: 0; }

/* dashboard mock */
.dash{
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 460px;
}
.dash .side{
  background: var(--paper-2);
  border-right: 1px solid var(--line);
  padding: 18px 12px;
}
.dash .side h4{ font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; padding-left: 8px; }
.dash .side .nav{ display:flex; flex-direction:column; gap: 1px; }
.dash .side .nav .it{
  display:flex; align-items:center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: 13px; cursor: pointer;
}
.dash .side .nav .it.active{ background: var(--p-color); color: var(--p-txt); }
.dash .side .nav .it .ico{ width: 16px; text-align: center; opacity: 0.75; }
.dash .side .nav .it.active .ico{ opacity: 1; }

.dash .main{ padding: 18px 22px; display:flex; flex-direction:column; gap: 14px; }
.dash .row3{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.dash .kpi{
  padding: 12px 14px; border-radius: 12px;
  background: var(--paper-2); border: 1px solid var(--line);
}
.dash .kpi.primary{ background: var(--p-color); color: var(--p-txt); border: 0; }
.dash .kpi .lbl{ font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.dash .kpi .v{ font-family: var(--f-display); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.02em; margin-top: 4px; }
.dash .kpi .d{ font-family: var(--f-mono); font-size: 11px; opacity: 0.8; margin-top: 4px; }

.dash .panel{
  border-radius: 12px; border: 1px solid var(--line); background: var(--paper); padding: 12px 14px;
}
.dash .panel .hd{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px; }
.dash .panel .hd b{ font-size: 13px; }
.dash .panel .hd .tag{ font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); }
.dash .panel .row{ display:flex; justify-content:space-between; align-items:center; padding: 5px 0; font-size: 13px; }

/* mini occupancy chart */
.occ{ display:flex; align-items:flex-end; gap: 4px; height: 50px; margin-top: 8px; }
.occ .b{ flex:1; background: color-mix(in oklch, var(--p-color), white 70%); border-radius: 3px; }
.occ .b.hi{ background: var(--p-color); }

/* ─── proof strip ─── */
.proof-strip{
  background: var(--ink); color: var(--paper);
  padding: 18px 32px;
  font-family: var(--f-mono); font-size: 12px;
  display:flex; align-items:center; justify-content:center; gap: 24px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.proof-strip .dot{ width: 4px; height: 4px; border-radius:999px; background: currentColor; opacity: 0.6; }

/* ─── features ─── */
.section.feat{ padding: 96px 32px; max-width: 1280px; margin: 0 auto; }
.section.feat .head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 36px; gap: 24px; }
.section.feat .head .eye{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.section.feat .head h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; font-size: 56px; line-height: 1.02; margin: 8px 0 0; max-width: 700px; }
.section.feat .head .sub{ color: var(--ink-3); max-width: 360px; font-size: 16px; line-height: 1.45; }

.feat-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }

.feat-card{
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.18), 0 4px 12px -6px rgba(0,0,0,0.12);
  overflow: hidden;
  display:flex; flex-direction: column;
}
.feat-card .bar{
  display:flex; align-items:center; gap: 8px;
  padding: 9px 14px;
  background: color-mix(in oklch, var(--p-color), white 85%);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.feat-card .bar .lt{ width: 11px; height: 11px; border-radius: 999px; }
.feat-card .bar .lt.r{ background: #ff5f57; }
.feat-card .bar .lt.y{ background: #febc2e; }
.feat-card .bar .lt.g{ background: #28c840; }
.feat-card .bar .name{ margin-left: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }
.feat-card .body{ padding: 28px; display:flex; flex-direction:column; gap: 14px; flex: 1; }
.feat-card .num{ font-family: var(--f-display); font-weight: 600; font-size: 80px; line-height: 0.9; color: var(--p-color); letter-spacing: -0.04em; }
.feat-card .eye{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.feat-card h3{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; font-size: 28px; line-height: 1.1; margin: 0; }
.feat-card p{ color: var(--ink-2); margin: 0; line-height: 1.55; }
.feat-card .viz{ flex: 1; min-height: 200px; }

.feat-card.big{ grid-column: span 8; }
.feat-card.small{ grid-column: span 4; }
.feat-card.half{ grid-column: span 6; }

/* feature viz: channel list */
.viz-channels{ display:flex; flex-direction:column; gap: 8px; padding: 8px 0; }
.viz-channels .ch{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px; border-radius: 10px;
  background: var(--paper-2); border: 1px solid var(--line);
}
.viz-channels .ch .l{ display:flex; align-items:center; gap: 10px; font-weight: 500; }
.viz-channels .ch .l .lg{ width: 22px; height: 22px; border-radius: 5px; background: var(--paper-3); display:inline-flex; align-items:center; justify-content:center; font-family: var(--f-display); font-weight: 700; font-size: 11px; }
.viz-channels .ch .r{ display:flex; align-items:center; gap: 8px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.viz-channels .ch .r .live{ width: 6px; height: 6px; border-radius: 999px; background: #22c55e; }

/* feature viz: pricing chart */
.viz-pricing{
  position: relative;
  height: 220px;
  padding: 16px 18px;
  background: var(--paper-2);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.viz-pricing svg{ width:100%; height: 100%; }

/* feature viz: guest journey */
.viz-guest{ display:flex; flex-direction:column; gap: 8px; }
.viz-guest .msg{
  padding: 9px 13px; border-radius: 12px; max-width: 78%;
  background: var(--paper-2); font-size: 13px; line-height: 1.35;
}
.viz-guest .msg.us{ align-self: flex-end; background: var(--p-color); color: var(--p-txt); border-bottom-right-radius: 5px; }
.viz-guest .msg.them{ border-bottom-left-radius: 5px; }
.viz-guest .label{ font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

/* feature viz: ops list */
.viz-ops{ display:flex; flex-direction:column; gap: 6px; }
.viz-ops .ti{
  display:flex; align-items:center; gap: 12px; padding: 9px 12px;
  border-radius: 10px; background: var(--paper-2); border:1px solid var(--line);
}
.viz-ops .ti .cb{ width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--ink-3); display:inline-flex; align-items:center; justify-content:center; flex: 0 0 auto; }
.viz-ops .ti.done .cb{ background: var(--p-color); border-color: var(--p-color); color: var(--p-txt); font-size: 12px; }
.viz-ops .ti.done .ti-name{ text-decoration: line-through; color: var(--ink-3); }
.viz-ops .ti-name{ flex: 1; font-size: 13px; }
.viz-ops .ti-meta{ font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }

/* feature viz: reports */
.viz-reports{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.viz-reports .r{
  padding: 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper-2);
}
.viz-reports .r .lbl{ font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.viz-reports .r .v{ font-family: var(--f-display); font-weight: 600; font-size: 26px; line-height: 1; margin: 6px 0 2px; letter-spacing: -0.02em; }
.viz-reports .r .d{ font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); }
.viz-reports .r.primary{ background: var(--p-color); color: var(--p-txt); border: 0; }
.viz-reports .r.primary .lbl, .viz-reports .r.primary .d{ opacity: 0.85; color: var(--p-txt); }

/* ─── how it works ─── */
.section.steps{ padding: 96px 32px; background: color-mix(in oklch, var(--p-color), white 92%); }
.section.steps .inner{ max-width: 1280px; margin: 0 auto; }
.section.steps h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; font-size: 56px; line-height: 1.02; margin: 0 0 36px; }
.steps-list{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  position: relative;
}
.steps-list .step{
  background: var(--paper);
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 24px;
  position: relative;
}
.steps-list .step .n{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--p-color); font-weight: 600;
}
.steps-list .step h4{ font-family: var(--f-display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; margin: 6px 0 8px; line-height: 1.1; }
.steps-list .step p{ color: var(--ink-2); margin: 0; line-height: 1.5; }
.steps-list .step::after{
  content:""; position:absolute; right:-12px; top: 28px;
  width: 24px; height: 2px; background: var(--p-color); opacity: 0.4;
}
.steps-list .step:last-child::after{ display:none; }

/* ─── use cases (tabs) ─── */
.section.uc{ padding: 96px 32px; max-width: 1280px; margin: 0 auto; }
.section.uc h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; font-size: 56px; line-height: 1.02; margin: 0 0 28px; max-width: 720px; }
.uc-tabs{
  display:flex; gap: 6px; padding: 4px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px;
  width: max-content;
  margin-bottom: 28px;
  overflow: hidden; max-width: 100%;
}
.uc-tabs button{
  border: 0; background: transparent;
  padding: 9px 18px; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink-2);
  transition: background .12s;
  white-space: nowrap;
}
.uc-tabs button:hover{ color: var(--ink); }
.uc-tabs button.on{ background: var(--ink); color: var(--paper); }

.uc-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  display:grid; grid-template-columns: 1fr 1fr; min-height: 380px;
}
.uc-card .l{ padding: 40px; display:flex; flex-direction: column; gap: 18px; }
.uc-card .l .meta{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-color); }
.uc-card .l h3{ font-family: var(--f-display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; margin: 0; line-height: 1.05; }
.uc-card .l p{ color: var(--ink-2); margin: 0; line-height: 1.55; font-size: 16px; }
.uc-card .l ul{ list-style: none; padding: 0; margin: 8px 0 0; display:flex; flex-direction: column; gap: 8px; }
.uc-card .l ul li{ display:flex; align-items:center; gap: 10px; font-size: 15px; }
.uc-card .l ul li::before{
  content:""; width: 16px; height: 16px; border-radius: 999px; flex: 0 0 auto;
  background: var(--p-color);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 9 L 7 13 L 14 3' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 9 L 7 13 L 14 3' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.uc-card .r{
  background: color-mix(in oklch, var(--p-color), white 80%);
  position: relative; overflow: hidden;
  display:flex; align-items:center; justify-content:center;
}
.uc-card .r .ill{
  font-family: var(--f-display); font-weight: 600; font-size: 200px;
  color: var(--p-color); opacity: 0.18; letter-spacing: -0.05em;
  line-height: 0.8;
}

/* ─── customer story ─── */
.section.story{ padding: 96px 32px; max-width: 1280px; margin: 0 auto; }
.story-card{
  background: var(--ink); color: var(--paper); border-radius: 22px;
  padding: 56px;
  display:grid; grid-template-columns: 1.2fr 1fr; gap: 50px;
  align-items: center; position: relative; overflow: hidden;
}
.story-card::before{
  content:"\""; position: absolute;
  top: -40px; right: 40px;
  font-family: var(--f-display); font-size: 320px; line-height: 1;
  color: var(--p-color); opacity: 0.25;
}
.story-card .brand{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.story-card .quote{ font-family: var(--f-display); font-weight: 500; font-size: 36px; line-height: 1.2; letter-spacing: -0.015em; margin: 14px 0 18px; }
.story-card .who{ font-size: 14px; opacity: 0.85; }
.story-card .who b{ display:block; font-weight: 600; opacity: 1; }
.story-card .sector{ font-family: var(--f-mono); font-size: 12px; opacity: 0.7; margin-top: 18px; }
.story-card .metrics{ display:flex; flex-direction: column; gap: 18px; position: relative; z-index: 1; }
.story-card .metrics .m{ border-top: 1px solid rgba(255,255,255,0.18); padding-top: 14px; }
.story-card .metrics .m:first-child{ border-top: 0; padding-top: 0; }
.story-card .metrics .m .v{ font-family: var(--f-display); font-weight: 600; font-size: 56px; color: var(--p-color); letter-spacing: -0.02em; line-height: 1; }
.story-card .metrics .m .k{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; margin-top: 4px; }

/* ─── integrations ─── */
.section.int{ padding: 96px 32px; max-width: 1280px; margin: 0 auto; }
.section.int h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; font-size: 48px; line-height: 1.04; margin: 0 0 14px; }
.section.int .sub{ color: var(--ink-3); margin: 0 0 32px; font-size: 16px; }
.int-grid{
  display:grid; grid-template-columns: repeat(8, 1fr); gap: 10px;
}
.int-grid .it{
  padding: 24px 12px; text-align: center;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px;
  font-family: var(--f-display); font-weight: 500; font-size: 15px;
  color: var(--ink-2);
  transition: transform .15s, border-color .15s, background .15s;
}
.int-grid .it:hover{ border-color: var(--p-color); transform: translateY(-2px); }

/* ─── pricing ─── */
.section.price{
  padding: 96px 32px;
  background: linear-gradient(180deg, var(--paper), color-mix(in oklch, var(--p-color), white 94%));
}
.section.price .inner{ max-width: 1280px; margin: 0 auto; }
.section.price .head{ text-align: center; margin-bottom: 48px; }
.section.price .head h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; font-size: 56px; line-height: 1.02; margin: 0 0 10px; }
.section.price .head p{ color: var(--ink-3); margin: 0; font-size: 17px; }

.price-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.price-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display:flex; flex-direction: column;
  transition: transform .15s ease;
}
.price-card.featured{ border: 2px solid var(--p-color); transform: translateY(-6px); box-shadow: 0 30px 60px -20px color-mix(in oklch, var(--p-color), transparent 60%); }
.price-card .bar{
  display:flex; align-items:center; gap: 8px;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.price-card.featured .bar{ background: var(--p-color); color: var(--p-txt); }
.price-card .bar .lt{ width:10px; height:10px; border-radius:999px; }
.price-card .bar .lt.r{ background:#ff5f57; }
.price-card .bar .lt.y{ background:#febc2e; }
.price-card .bar .lt.g{ background:#28c840; }
.price-card .bar .name{ margin-left: 8px; font-family: var(--f-mono); font-size: 12px; }
.price-card .body{ padding: 28px; display:flex; flex-direction: column; gap: 14px; flex: 1; }
.price-card .body .p-name{ font-family: var(--f-display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; }
.price-card .body .p-price{ font-family: var(--f-display); font-weight: 600; font-size: 52px; line-height: 1; letter-spacing: -0.03em; }
.price-card .body .p-price .per{ font-size: 16px; color: var(--ink-3); font-weight: 400; margin-left: 4px; }
.price-card .body .kicker{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-color); font-weight: 600; }
.price-card .body p.desc{ color: var(--ink-2); margin: 0; }
.price-card ul.feats{ list-style: none; padding: 0; margin: 0; display:flex; flex-direction: column; gap: 9px; }
.price-card ul.feats li{ display:flex; gap: 10px; font-size: 14px; align-items: baseline; }
.price-card ul.feats li::before{
  content:"✓"; color: var(--p-color); font-weight: 700; font-size: 14px;
}
.price-card .cta{ margin-top: auto; }

/* ─── FAQ ─── */
.section.faq{ padding: 96px 32px; max-width: 900px; margin: 0 auto; }
.section.faq h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; font-size: 56px; line-height: 1.02; margin: 0 0 36px; }
.faq-item{
  border-bottom: 1px solid var(--line);
}
.faq-item button{
  width: 100%;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  padding: 22px 0;
  background: transparent; border: 0;
  text-align: left;
  font-family: var(--f-display); font-weight: 500; font-size: 22px; letter-spacing: -0.01em;
  color: var(--ink);
}
.faq-item .ic{
  width: 28px; height: 28px; border-radius: 999px;
  border: 1.5px solid var(--ink-3); display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
  transition: transform .25s, background .12s, border-color .12s;
  font-size: 16px;
}
.faq-item.open .ic{ background: var(--p-color); border-color: var(--p-color); color: var(--p-txt); transform: rotate(45deg); }
.faq-item .ans{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  color: var(--ink-2);
  font-size: 15px; line-height: 1.55;
}
.faq-item.open .ans{ max-height: 300px; padding-bottom: 24px; }

/* ─── cross-sell ─── */
.section.cross{
  padding: 96px 32px;
  background: var(--paper-2);
}
.section.cross .inner{ max-width: 1280px; margin: 0 auto; }
.section.cross .head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 32px; gap: 24px; }
.section.cross h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; font-size: 44px; line-height: 1.04; margin: 0; max-width: 580px; }
.section.cross .sub{ color: var(--ink-3); max-width: 380px; font-size: 15px; }
.cross-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cross-card{
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 22px;
  display:flex; flex-direction: column; gap: 12px;
  transition: transform .15s, border-color .15s;
  cursor: pointer;
}
.cross-card:hover{ transform: translateY(-4px); border-color: var(--cc, var(--ink)); }
.cross-card .ico{
  width: 44px; height: 44px; border-radius: 11px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-weight: 600; font-size: 22px;
}
.cross-card h4{ font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin: 0; }
.cross-card p{ color: var(--ink-2); font-size: 14px; line-height: 1.45; margin: 0; flex: 1; }
.cross-card .more{ font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }

/* ─── detail cta ─── */
.section.dcta{
  padding: 96px 32px;
  background: var(--p-color); color: var(--p-txt);
  text-align: center;
}
.section.dcta h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; font-size: 72px; line-height: 1.0; margin: 0 0 18px; }
.section.dcta p{ font-size: 18px; opacity: 0.85; max-width: 540px; margin: 0 auto 28px; }
.section.dcta .cta-row{ display:flex; gap: 12px; justify-content:center; flex-wrap: wrap; }
.section.dcta .btn{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
.section.dcta .btn:hover{ background: var(--paper-2); }
.section.dcta .btn.outline{ background: transparent; color: var(--p-txt); border: 1.5px solid var(--p-txt); }
.section.dcta .btn.outline:hover{ background: rgba(0,0,0,0.08); }

/* ─── responsive trims ─── */
@media (max-width: 1100px){
  .d-hero .inner{ grid-template-columns: 1fr; }
  .feat-card.big, .feat-card.small, .feat-card.half{ grid-column: span 12; }
  .uc-card{ grid-template-columns: 1fr; }
  .price-grid, .steps-list, .cross-grid{ grid-template-columns: 1fr 1fr; }
  .int-grid{ grid-template-columns: repeat(4, 1fr); }
  .story-card{ grid-template-columns: 1fr; padding: 36px; }
}
@media (max-width: 700px){
  .detail-bar .right{ display: none; }
  .detail-bar .title > span:not(.crumb){ display: none; }
  .d-hero h1{ font-size: 56px; }
  .price-grid, .steps-list, .cross-grid{ grid-template-columns: 1fr; }
  .int-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Fiyatlar henüz kesinleşmedi — fiyatlandırma bölümü şimdilik tüm ürün
   detaylarında (hotel, web, vb.) gizli. Kesin fiyatlar gelince bu kuralı sil. */
.section.price { display: none; }