:root{
  --bg:#f5f8fc;
  --bg-soft:#eef4fb;
  --card:rgba(255,255,255,.90);
  --card-strong:#ffffff;
  --text:#0f172a;
  --muted:#546477;
  --line:rgba(148,163,184,.20);
  --blue:#0ea5e9;
  --blue-dark:#2563eb;
  --indigo:#6366f1;
  --green:#16a34a;
  --amber:#d97706;
  --red:#dc2626;
  --shadow:0 24px 56px rgba(15,23,42,.12);
  --shadow-sm:0 12px 28px rgba(15,23,42,.08);
  --radius:26px;
  --radius-sm:18px;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Segoe UI,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.13), transparent 32%),
    radial-gradient(circle at top right, rgba(99,102,241,.10), transparent 34%),
    linear-gradient(180deg,#f8fbff 0%, #edf4fb 46%, #f8fafc 100%);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.wrap{width:min(var(--max), calc(100% - 32px)); margin:0 auto}
.hidden{display:none !important}

.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(148,163,184,.14);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:78px;
}
.brand{display:flex; align-items:center; gap:14px; min-width:0}
.brand-mark{
  width:54px; height:54px; border-radius:16px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark),var(--indigo));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:.8px; box-shadow:0 14px 28px rgba(37,99,235,.22);
}
.brand-copy strong{display:block; font-size:22px; letter-spacing:-.4px}
.brand-copy span{display:block; font-size:13px; color:var(--muted)}
.nav{display:flex; flex-wrap:wrap; gap:18px; justify-content:center; color:#334155; font-size:14px}
.nav a{padding:8px 0; font-weight:700; position:relative}
.nav a::after{
  content:""; position:absolute; left:0; bottom:3px; width:100%; height:2px;
  background:linear-gradient(90deg,var(--blue),var(--indigo));
  transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.top-actions{display:flex; gap:10px; flex-wrap:wrap}

.btn,.btn-outline,.btn-dark,.btn-small{
  border:0; border-radius:999px; font-weight:700; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.btn:hover,.btn-outline:hover,.btn-dark:hover,.btn-small:hover{transform:translateY(-1px)}
.btn{
  padding:13px 18px; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  box-shadow:0 12px 24px rgba(37,99,235,.20)
}
.btn-outline{
  padding:13px 18px; color:#0f172a;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(148,163,184,.22)
}
.btn-dark{
  padding:13px 18px; color:#fff;
  background:#0f172a;
  box-shadow:0 12px 24px rgba(15,23,42,.18)
}
.btn-small{
  display:inline-flex; align-items:center;
  padding:10px 14px; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark))
}

.hero{padding:58px 0 34px; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:26px; width:min(1340px, calc(100% - 28px)); height:560px;
  border-radius:40px;
  background:linear-gradient(135deg, rgba(14,165,233,.10), rgba(99,102,241,.08), rgba(34,197,94,.06));
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:28px; align-items:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px;
  border-radius:999px; font-size:13px; font-weight:800;
  background:rgba(255,255,255,.86); border:1px solid rgba(148,163,184,.18);
  box-shadow:var(--shadow-sm); margin-bottom:18px
}
.eyebrow-dot{
  width:10px; height:10px; border-radius:999px;
  background:linear-gradient(135deg,#22c55e,#0ea5e9);
  box-shadow:0 0 0 6px rgba(34,197,94,.10)
}
h1{margin:0; font-size:clamp(38px,6vw,62px); line-height:1.02; letter-spacing:-1.8px}
.lead{margin:18px 0 24px; color:#334155; line-height:1.74; font-size:18px}
.hero-points{margin:22px 0 26px; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.hero-points li,.check-list li,.feature-list li{
  display:flex; gap:10px; align-items:flex-start;
  background:rgba(255,255,255,.84); border:1px solid rgba(148,163,184,.16);
  border-radius:16px; padding:12px 14px; box-shadow:var(--shadow-sm)
}
.dot{
  min-width:12px; width:12px; height:12px; border-radius:999px; margin-top:5px;
  background:linear-gradient(135deg,var(--blue),var(--indigo))
}
.hero-cta,.dual-actions{display:flex; gap:12px; flex-wrap:wrap}

.hero-card,.card,.form-card,.product-side,.panel,.workspace{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  backdrop-filter:blur(16px);
}
.hero-card{padding:24px; position:relative}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.92); border:1px solid rgba(148,163,184,.18);
  font-size:12px; font-weight:800; color:#1e293b
}
.stats-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px}
.stat{
  background:rgba(255,255,255,.88); border:1px solid rgba(148,163,184,.15);
  border-radius:18px; padding:16px
}
.stat strong{display:block; font-size:28px; letter-spacing:-.6px}
.stat span{display:block; margin-top:6px; color:var(--muted); font-size:13px; line-height:1.5}

.section{padding:26px 0 14px}
.section-header{margin-bottom:20px}
.section-title{margin:0 0 10px; font-size:clamp(28px,3.6vw,40px); letter-spacing:-1px}
.section-copy{margin:0; max-width:780px; color:var(--muted); font-size:17px; line-height:1.72}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.card-body{padding:22px}
.card h3{margin:0 0 10px; font-size:24px; letter-spacing:-.5px}
.card p{margin:0 0 16px; color:var(--muted); line-height:1.72}
.visual{
  min-height:220px; position:relative;
  background:
    linear-gradient(135deg, rgba(14,165,233,.16), rgba(99,102,241,.12)),
    radial-gradient(circle at bottom right, rgba(37,99,235,.14), transparent 40%)
}
.visual::after{
  content:attr(data-label);
  position:absolute; left:22px; bottom:18px; font-size:28px; font-weight:800; letter-spacing:-.6px;
}
.visual.image-slot::before{
  content:"BSiPromos image placeholder";
  position:absolute; right:18px; top:18px;
  padding:8px 12px; border-radius:999px; font-size:12px; font-weight:800;
  background:rgba(255,255,255,.88); border:1px solid rgba(148,163,184,.18)
}
.price-chip{
  display:inline-flex; margin-top:14px; padding:10px 14px; border-radius:999px;
  background:rgba(37,99,235,.08); color:#1d4ed8; font-weight:800
}
.feature-list,.check-list{padding:0; list-style:none; display:grid; gap:10px; margin:0}
.info-band{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px}
.mini-card{
  background:rgba(255,255,255,.88); border:1px solid rgba(148,163,184,.16);
  border-radius:20px; box-shadow:var(--shadow-sm); padding:18px
}
.mini-card h4{margin:0 0 8px; font-size:18px}
.mini-card p{margin:0; color:var(--muted); line-height:1.7}

.process{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; counter-reset:step}
.step{
  padding:22px; border-radius:22px; background:rgba(255,255,255,.88);
  border:1px solid rgba(148,163,184,.16); box-shadow:var(--shadow-sm)
}
.step::before{
  counter-increment:step; content:counter(step);
  width:42px; height:42px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--indigo)); color:#fff;
  font-weight:800; margin-bottom:14px
}
.step h4{margin:0 0 8px; font-size:18px}
.step p{margin:0; color:var(--muted); line-height:1.65}

.form-card{padding:24px}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.field{margin-bottom:14px}
.field label{display:block; margin-bottom:7px; font-size:13px; font-weight:800; color:#334155}
input,select,textarea{
  width:100%; padding:13px 14px; border-radius:14px;
  border:1px solid rgba(148,163,184,.25); outline:none;
  background:rgba(255,255,255,.98); color:var(--text)
}
textarea{min-height:120px; resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:rgba(37,99,235,.42);
  box-shadow:0 0 0 5px rgba(37,99,235,.08)
}
.file-note{display:block; margin-top:8px; color:var(--muted); font-size:12px}
.notice,.success-note,.warning-note{
  border-radius:16px; padding:14px 16px; line-height:1.65
}
.notice{
  background:rgba(245,158,11,.10); color:#92400e; border:1px solid rgba(245,158,11,.16)
}
.success-note{
  background:rgba(34,197,94,.10); color:#166534; border:1px solid rgba(34,197,94,.18)
}
.warning-note{
  background:rgba(220,38,38,.08); color:#991b1b; border:1px solid rgba(220,38,38,.14)
}

.product-shell{padding:32px 0 36px}
.breadcrumbs{font-size:14px; color:#64748b; margin-bottom:14px}
.breadcrumbs span{color:#0f172a; font-weight:700}
.product-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.gallery{
  min-height:520px; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow);
  background:
    linear-gradient(135deg, rgba(14,165,233,.16), rgba(99,102,241,.12)),
    linear-gradient(180deg, #ffffff, #eef6ff);
  position:relative; overflow:hidden
}
.gallery::before,.gallery::after{
  content:""; position:absolute; border-radius:26px;
  background:rgba(255,255,255,.78); border:1px solid rgba(148,163,184,.18)
}
.gallery::before{width:46%; height:62%; left:7%; top:12%; transform:rotate(-10deg)}
.gallery::after{width:38%; height:52%; right:10%; top:18%; transform:rotate(9deg)}
.gallery-badge{
  position:absolute; left:22px; top:20px; z-index:1;
  padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.90);
  border:1px solid rgba(148,163,184,.18); font-weight:800
}
.gallery-caption{
  position:absolute; left:22px; right:22px; bottom:22px; z-index:1;
  font-size:28px; font-weight:800; letter-spacing:-.6px
}
.product-side{padding:24px}
.product-side h1{font-size:44px; line-height:1.06; letter-spacing:-1.2px; margin-bottom:10px}
.product-side h2{font-size:28px; letter-spacing:-.8px; margin:0 0 10px}
.product-side p{color:var(--muted); line-height:1.75}
.list{padding-left:20px; color:#334155; line-height:1.75}
.price-table{width:100%; border-collapse:collapse; margin:16px 0; overflow:hidden}
.price-table th,.price-table td{
  border:1px solid rgba(148,163,184,.18); padding:12px 10px; text-align:center
}
.price-table th{background:#f8fbff; color:#334155}
.option-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:14px 0}
.option{
  background:rgba(255,255,255,.88); border:1px solid rgba(148,163,184,.20);
  border-radius:18px; padding:16px 12px; text-align:center; cursor:pointer;
  transition:all .16s ease
}
.option:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.option.active{border-color:rgba(37,99,235,.48); box-shadow:0 0 0 5px rgba(37,99,235,.08)}
.option-box{
  width:38px; height:52px; margin:0 auto 10px; border-radius:8px;
  background:linear-gradient(180deg,#e2e8f0,#ffffff);
  border:1px solid rgba(148,163,184,.26)
}
.option strong{display:block; font-size:14px}
.option span{display:block; margin-top:4px; color:#1d4ed8; font-weight:800}
.total-box{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:16px 0; padding:18px 20px; border-radius:20px;
  background:linear-gradient(135deg, rgba(14,165,233,.08), rgba(99,102,241,.08));
  border:1px solid rgba(37,99,235,.14)
}
.total-box strong{display:block; font-size:18px}
.total-box small{display:block; color:#475569}
.total-box span{display:block; color:#1d4ed8; font-weight:800; font-size:28px}

.studio-shell{
  display:grid; grid-template-columns:320px 1fr; gap:18px;
  padding:18px 0 26px; min-height:calc(100vh - 78px)
}
.panel-header,.workspace-header{
  padding:16px 18px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.72)
}
.panel-header h2,.workspace-header h2{margin:0; font-size:22px; letter-spacing:-.4px}
.panel-header p,.workspace-header p{margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.6}
.panel-body,.workspace-body{padding:18px}
.summary-card{
  padding:16px; border-radius:20px; margin-bottom:18px;
  background:linear-gradient(135deg, rgba(14,165,233,.10), rgba(99,102,241,.10));
  border:1px solid rgba(37,99,235,.14)
}
.summary-card small{
  display:block; margin-bottom:8px; color:#1d4ed8; font-weight:800;
  text-transform:uppercase; letter-spacing:.7px
}
.summary-card strong{display:block; font-size:26px; letter-spacing:-.7px; margin-bottom:6px}
.summary-card span{color:#334155; line-height:1.6; font-size:14px}
.tabs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:18px}
.tab-btn{
  border-radius:14px; padding:12px 10px; border:1px solid rgba(148,163,184,.20);
  background:rgba(255,255,255,.92); font-weight:700; cursor:pointer
}
.tab-btn.active{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  box-shadow:0 10px 20px rgba(37,99,235,.16)
}
.upload-drop{
  border:2px dashed rgba(37,99,235,.22);
  border-radius:20px; padding:26px 16px; text-align:center;
  background:rgba(255,255,255,.70); margin-bottom:16px
}
.upload-drop strong{display:block; margin-bottom:8px; font-size:18px}
.upload-drop p{margin:0; color:var(--muted); line-height:1.6; font-size:14px}
.workspace-canvas{
  min-height:560px; border-radius:24px;
  border:1px solid rgba(148,163,184,.18);
  background:
    linear-gradient(135deg, rgba(14,165,233,.12), rgba(99,102,241,.10)),
    repeating-linear-gradient(0deg, rgba(148,163,184,.12) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(148,163,184,.12) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, #ffffff, #edf5ff);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:24px; position:relative; overflow:hidden
}
.workspace-canvas::after{
  content:"PNWDTFS DESIGN PREVIEW";
  position:absolute; right:20px; bottom:20px;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.88); border:1px solid rgba(148,163,184,.18);
  font-weight:800
}
.canvas-box{
  width:min(560px,100%); aspect-ratio:1 / 1; border-radius:24px;
  border:2px dashed rgba(37,99,235,.26);
  background:rgba(255,255,255,.78);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden
}
.canvas-box.canva-preview::before{
  content:"Canva preview area";
  position:absolute; top:16px; left:16px;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.90); border:1px solid rgba(148,163,184,.18);
  font-size:12px; font-weight:800
}
.canvas-box strong{font-size:24px; letter-spacing:-.5px}
.canvas-box p{max-width:360px; margin:0; color:var(--muted); line-height:1.7}
.summary-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px}
.summary-pill{
  border-radius:18px; padding:14px;
  background:rgba(255,255,255,.88); border:1px solid rgba(148,163,184,.18)
}
.summary-pill small{display:block; color:var(--muted); margin-bottom:4px}
.summary-pill strong{font-size:18px}

.guidelines-layout{display:grid; grid-template-columns:280px 1fr; gap:18px}
.guidelines-nav{
  position:sticky; top:96px;
  background:rgba(255,255,255,.88); border:1px solid rgba(148,163,184,.16);
  border-radius:22px; box-shadow:var(--shadow-sm); padding:18px
}
.guidelines-nav h3{margin:0 0 12px; font-size:18px}
.guidelines-nav a{
  display:block; padding:10px 12px; border-radius:14px; color:#334155; font-weight:700;
}
.guidelines-nav a:hover{background:rgba(37,99,235,.06)}
.guideline-block{
  background:rgba(255,255,255,.88); border:1px solid rgba(148,163,184,.16);
  border-radius:22px; box-shadow:var(--shadow-sm); padding:20px; margin-bottom:16px
}
.guideline-block h3{margin:0 0 8px; font-size:24px; letter-spacing:-.5px}
.guideline-block p{margin:0; color:var(--muted); line-height:1.74}
.guideline-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px}
.guideline-card{
  background:rgba(248,250,252,.96); border:1px solid rgba(148,163,184,.16);
  border-radius:18px; padding:16px
}
.guideline-card h4{margin:0 0 8px; font-size:18px}
.guideline-card p{margin:0; color:var(--muted); line-height:1.65}
.help-strip{
  margin-top:18px; padding:18px; border-radius:20px;
  background:linear-gradient(135deg, rgba(14,165,233,.08), rgba(99,102,241,.08));
  border:1px solid rgba(37,99,235,.14)
}
.help-strip h4{margin:0 0 8px; font-size:20px}
.help-strip p{margin:0; color:#334155; line-height:1.7}

.cta-band{
  margin:24px 0 40px; padding:26px; border-radius:30px;
  background:linear-gradient(135deg,#0ea5e9,#2563eb,#6366f1);
  color:#fff; box-shadow:0 20px 44px rgba(37,99,235,.25)
}
.cta-band h3{margin:0 0 10px; font-size:34px; letter-spacing:-1px}
.cta-band p{margin:0 0 16px; line-height:1.8; max-width:760px; color:rgba(255,255,255,.92)}
.cta-band .btn-outline{background:rgba(255,255,255,.94)}

.footer{padding:22px 0 38px; color:#475569}
.footer-card{
  background:rgba(255,255,255,.78); border:1px solid rgba(148,163,184,.16);
  border-radius:26px; box-shadow:var(--shadow-sm); padding:22px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap
}
.footer-copy strong{display:block; font-size:18px; margin-bottom:6px; color:#0f172a}
.footer-copy span{display:block; line-height:1.7}
.footer-links{display:flex; gap:18px; flex-wrap:wrap; font-weight:700}

@media (max-width:1100px){
  .hero-grid,.grid-3,.grid-2,.product-grid,.process,.studio-shell,.guidelines-layout{grid-template-columns:1fr}
  .info-band,.guideline-grid{grid-template-columns:1fr}
  .option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guidelines-nav{position:relative; top:auto}
}
@media (max-width:860px){
  .topbar-inner{padding:10px 0; flex-direction:column; align-items:flex-start}
  .nav{justify-content:flex-start}
  .top-actions{width:100%}
  .hero-points,.form-grid,.stats-grid,.summary-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{width:min(var(--max), calc(100% - 20px))}
  .option-grid{grid-template-columns:1fr}
  .dual-actions,.hero-cta{flex-direction:column; align-items:stretch}
  .btn,.btn-outline,.btn-dark{width:100%}
}


.order-cta-strip{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  padding:18px;
  margin:24px 0;
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow-sm);
}

.order-cta-strip .btn,
.order-cta-strip .btn-outline,
.order-cta-strip .btn-secondary{
  min-width:180px;
  text-align:center;
}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:14px;
  font-weight:700;
  text-decoration:none;
  background:#0f172a;
  color:#fff;
  border:1px solid #0f172a;
  box-shadow:var(--shadow-sm);
  transition:all .2s ease;
}

.btn-secondary:hover{
  background:#1e293b;
  border-color:#1e293b;
  transform:translateY(-1px);
}