/* ============================================================
   Tile Stock v2 — Marketing site styles
   Brand palette mirrored from the app (N & D · Nandni Enterprise)
   ============================================================ */
:root{
  --clay:        #A8451F;
  --clay-dark:   #8A3717;
  --glaze:       #2F6E63;
  --glaze-dark:  #235650;
  --ink:         #262220;
  --ink-soft:    #6E675D;
  --bg:          #EFEAE0;
  --panel:       #F8F5EE;
  --line:        #D2C9B8;
  --line-soft:   #E2DBCB;
  --warn-bg:     #FBEADD;
  --warn-ink:    #8A4A16;
  --danger:      #B23A2E;
  --white:       #FFFFFF;
  --radius:      14px;
  --shadow:      0 1px 2px rgba(38,34,32,.06), 0 10px 30px rgba(38,34,32,.08);
  --font-display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:86px; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--clay); color:#fff; }

h1,h2,h3,h4{ font-family:var(--font-display); }
a{ color:var(--clay); }
a:hover{ color:var(--clay-dark); }

/* ---------- Buttons ---------- */
.nd-btn-primary{
  background:var(--clay); color:#fff; border:1px solid var(--clay); border-radius:10px;
  font-weight:600; transition:all .15s ease;
}
.nd-btn-primary:hover,.nd-btn-primary:focus{
  background:var(--clay-dark); border-color:var(--clay-dark); color:#fff; transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(168,69,31,.30);
}
.nd-btn-ghost{
  background:transparent; color:var(--ink); border:1.5px solid var(--line); border-radius:10px;
  font-weight:600; transition:all .15s ease;
}
.nd-btn-ghost:hover,.nd-btn-ghost:focus{
  background:var(--panel); border-color:#B9B09D; color:var(--ink);
}
.nd-btn-light{
  background:#fff; color:var(--clay-dark); border-radius:10px; font-weight:700; transition:all .15s ease;
}
.nd-btn-light:hover{ background:var(--panel); color:var(--clay-dark); transform:translateY(-1px); }
.nd-btn-outline-light{
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); border-radius:10px; font-weight:600;
}
.nd-btn-outline-light:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.08); }

/* ---------- Navbar ---------- */
.nd-navbar{
  background:rgba(38,34,32,.92);
  backdrop-filter:blur(10px);
  padding:10px 0;
  transition:box-shadow .2s ease, background .2s ease;
}
.nd-navbar.scrolled{ background:rgba(38,34,32,.98); box-shadow:0 4px 20px rgba(0,0,0,.25); }
.nd-navbar .navbar-brand{ color:#F3EEE3; }
.nd-navbar .brand-text strong{ font-family:var(--font-display); font-size:19px; letter-spacing:.3px; }
.nd-navbar .brand-text small{ font-size:10.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#B4572E; }
.nd-navbar .nav-link{ color:#D8D0C0; font-weight:500; font-size:14.5px; padding:.5rem .85rem; border-radius:8px; }
.nd-navbar .nav-link:hover{ color:#fff; background:rgba(255,255,255,.08); }
.nd-navbar .navbar-toggler{ border-color:rgba(255,255,255,.3); }
.nd-navbar .navbar-toggler:focus{ box-shadow:0 0 0 3px rgba(255,255,255,.25); }
.nd-navbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(47,110,99,.55), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(168,69,31,.45), transparent 60%),
    linear-gradient(120deg, #262220 0%, #33302C 55%, #2F6E63 150%);
  color:#F3EEE3;
  padding:150px 0 0;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#E7C7A0; font-size:13px; font-weight:600; letter-spacing:.3px;
  padding:7px 14px; border-radius:30px; margin-bottom:22px;
}
.hero-title{
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  line-height:1.12; margin-bottom:20px; letter-spacing:.2px;
}
.text-gradient{
  background:linear-gradient(90deg, #E7A96B, #E8B98B 45%, #8FD0C4);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-size:clamp(1rem, 1.6vw, 1.15rem); line-height:1.7; color:#C9C0AE; max-width:560px; margin-bottom:28px;
}
.hero-points li{ font-size:14px; color:#D8D0C0; }
.hero-points i{ color:#7FAE97; margin-right:6px; }

/* ---------- Browser mockup ---------- */
.browser-mockup{
  position:relative;
  background:#151310;
  border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  overflow:hidden;
  transform:rotate(0deg);
  transition:transform .4s ease;
}
.browser-mockup:hover{ transform:translateY(-6px); }
.browser-bar{
  display:flex; align-items:center; gap:7px; padding:11px 14px; background:#232120;
}
.browser-bar .dot{ width:11px; height:11px; border-radius:50%; }
.dot.r{ background:#E0655A; } .dot.y{ background:#E7B455; } .dot.g{ background:#62B587; }
.url-bar{
  flex:1; margin-left:8px; background:#151310; color:#9C9384; font-size:12px;
  padding:5px 12px; border-radius:7px; display:flex; align-items:center; gap:6px;
}
.app-frame{
  display:flex; min-height:420px; background:var(--bg);
}
.app-sidebar{
  width:120px; background:#262220; color:#C9C0AE; padding:14px 10px; flex:none;
  display:flex; flex-direction:column; gap:3px;
}
.app-sidebar .app-logo{
  display:flex; align-items:center; gap:6px; color:#F3EEE3; font-weight:700; font-size:13px;
  font-family:var(--font-display); padding:4px 8px 14px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:10px;
}
.app-sidebar .app-logo img{ width:20px; height:20px; border-radius:4px; }
.app-sidebar .nav-item{
  font-size:12px; padding:8px 9px; border-radius:8px; display:flex; align-items:center; gap:8px; cursor:default;
}
.app-sidebar .nav-item i{ font-size:14px; width:16px; }
.app-sidebar .nav-item.active{ background:rgba(168,69,31,.18); color:#E7A96B; }
.app-sidebar .app-user{
  margin-top:auto; width:32px; height:32px; border-radius:50%; background:var(--glaze); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}
.app-main{ flex:1; padding:16px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.app-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.app-head h4{ font-size:19px; margin:0; color:var(--ink); }
.app-head span{ font-size:11.5px; color:var(--ink-soft); }
.app-pills{ display:flex; gap:8px; }
.app-pills .pill{
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 11px; min-width:70px;
  display:flex; flex-direction:column; line-height:1.2;
}
.app-pills .pill b{ font-size:15px; font-family:ui-monospace,Menlo,Consolas,monospace; color:#6b7280; }
.app-pills .pill span{ font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; }
.app-pills .pill.warn b{ color:var(--warn-ink); }
.app-toolbar{ display:flex; align-items:center; gap:8px; }
.app-toolbar .search{
  flex:1; background:#fff; border:1px solid var(--line); border-radius:8px; padding:7px 11px;
  font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:7px;
}
.app-toolbar .ghost-btn{
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:7px 11px;
  font-size:12px; color:var(--ink); white-space:nowrap;
}
.app-toolbar .ghost-btn.pdf{ color:var(--clay); }

/* real tile-card grid (mirrors the app) */
.mock-tiles{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; flex:1; align-content:start; min-height:0;
}
.mock-tile{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:10px; overflow:hidden;
  display:flex; flex-direction:column;
}
.mock-photo{
  aspect-ratio:1/1; background:#DCD5C4 center/cover no-repeat; position:relative;
}
.mock-badge{
  position:absolute; top:6px; right:6px; background:rgba(38,34,32,.82); color:#fff;
  font-size:10px; font-weight:600; font-family:ui-monospace,Menlo,Consolas,monospace;
  padding:2px 7px; border-radius:20px;
}
.mock-badge.low{ background:var(--danger); }
.mock-info{ padding:7px 9px 9px; display:flex; flex-direction:column; gap:3px; }
.mock-name{ font-weight:700; font-size:11.5px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mock-size{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.5px; color:var(--ink-soft); }
.mock-actions{ display:flex; gap:4px; margin-top:5px; }
.mock-actions span{ flex:1; text-align:center; font-size:9.5px; font-weight:700; padding:4px 0; border-radius:5px; }
.mock-actions .buy{ background:#E4EFE8; color:var(--glaze-dark); }
.mock-actions .sell{ background:#F5E4DC; color:var(--clay-dark); }
.tour-tiles{ display:grid; grid-template-columns:repeat(3, 1fr); gap:9px; }
.tour-tiles .mock-tile .mock-photo{ aspect-ratio:1/1; }
@media (max-width: 400px){ .tour-tiles{ grid-template-columns:repeat(2, 1fr); } }
.app-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; }
.app-table th{
  text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--ink-soft);
  padding:9px 11px; background:var(--panel); border-bottom:1px solid var(--line-soft);
}
.app-table td{ font-size:12px; padding:9px 11px; border-bottom:1px solid var(--line-soft); color:var(--ink); }
.app-table tr:last-child td{ border-bottom:none; }
.app-table td:nth-child(3){ font-weight:600; font-family:ui-monospace,Menlo,Consolas,monospace; }
.tag{
  font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap;
}
.tag.ok{ background:rgba(47,110,99,.12); color:var(--glaze-dark); }
.tag.warn{ background:var(--warn-bg); color:var(--warn-ink); }
.tag.bad{ background:rgba(178,58,46,.12); color:var(--danger); }
.app-bottom{
  display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--ink-soft);
  border-top:1px dashed var(--line); padding-top:10px;
}
.app-bottom .connected{ display:flex; align-items:center; gap:6px; }
.app-bottom .dot{ width:7px; height:7px; border-radius:50%; background:#7FAE97; }
.mock-glint{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.06) 45%, transparent 60%);
}

/* ---------- Hero strip ---------- */
.hero-strip{
  margin-top:70px; background:rgba(255,255,255,.04); border-top:1px solid rgba(255,255,255,.08);
  padding:18px 0;
}
.hero-strip span{ color:#C9C0AE; font-size:13.5px; display:inline-flex; align-items:center; gap:8px; }
.hero-strip i{ color:#7FAE97; }

/* ---------- Sections ---------- */
.section{ padding:96px 0; }
.section-alt{ background:var(--panel); }
.section-head{ max-width:680px; margin:0 auto 56px; }
.eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--clay); margin-bottom:12px;
}
.section-head h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); color:var(--ink); margin-bottom:14px; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; line-height:1.7; }

/* ---------- Stats ---------- */
.stats-section{ padding:40px 0; background:linear-gradient(120deg, var(--clay-dark), var(--clay)); }
.stat{ color:#fff; }
.stat .n{ font-family:var(--font-display); font-size:2.1rem; font-weight:700; }
.stat .l{ font-size:13px; color:rgba(255,255,255,.8); margin-top:2px; }

/* ---------- Feature cards ---------- */
.feature-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:30px 26px; height:100%; transition:all .18s ease; position:relative; overflow:hidden;
}
.feature-card::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg, var(--clay), var(--glaze)); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line); }
.feature-card:hover::after{ transform:scaleX(1); }
.feature-card .icon{ width:54px; height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:18px; }
.feature-card h3{ font-size:1.22rem; margin-bottom:10px; }
.feature-card p{ color:var(--ink-soft); font-size:.95rem; line-height:1.65; margin:0; }
.icon.ic-clay{ background:rgba(168,69,31,.12); color:var(--clay); }
.icon.ic-teal{ background:rgba(47,110,99,.12); color:var(--glaze); }

/* ---------- Showcase ---------- */
.showcase-tabs .nav-link{
  background:#fff; border:1px solid var(--line); color:var(--ink-soft); font-weight:600;
  border-radius:30px; padding:.6rem 1.3rem; display:inline-flex; align-items:center; gap:8px; font-size:14px;
}
.showcase-tabs .nav-link i{ font-size:15px; }
.showcase-tabs .nav-link.active{ background:var(--clay); border-color:var(--clay); color:#fff; }
.showcase-tabs .nav-link:not(.active):hover{ border-color:var(--clay); color:var(--clay); }
.tab-content .tab-pane{ padding-top:20px; }

.screen-shot{
  background:#262220; border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
}
.screen-bar{
  display:flex; align-items:center; gap:7px; padding:10px 14px; background:#33302C;
  color:#C9C0AE; font-size:12px;
}
.screen-bar span{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); }
.screen-bar b{ margin-left:8px; font-weight:600; font-size:12.5px; }
.screen-body{ background:#fff; padding:16px; display:flex; flex-direction:column; gap:10px; }
.sc-head{ display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--ink-soft); flex-wrap:wrap; }
.sc-head .sc-pill{ background:var(--panel); border:1px solid var(--line); padding:4px 10px; border-radius:7px; }
.sc-row{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; font-size:12.5px; }
.sc-name{ color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-bar{ width:110px; height:8px; background:var(--line-soft); border-radius:6px; overflow:hidden; }
.sc-bar i{ display:block; height:100%; width:var(--w); background:var(--glaze); border-radius:6px; }
.sc-bar.low i{ background:var(--clay); }
.sc-row b{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; }
.sc-foot{ display:flex; gap:8px; flex-wrap:wrap; border-top:1px dashed var(--line-soft); padding-top:10px; }
.sc-foot span{ font-size:11.5px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; }
.sc-line{ display:flex; align-items:center; gap:12px; padding:10px; background:var(--panel); border:1px solid var(--line-soft); border-radius:10px; }
.sc-line .sc-ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; flex:none; }
.sc-ic.in{ background:rgba(47,110,99,.14); color:var(--glaze); }
.sc-ic.out{ background:rgba(168,69,31,.12); color:var(--clay); }
.sc-ic.adj{ background:rgba(138,74,22,.12); color:var(--warn-ink); }
.sc-line div{ flex:1; min-width:0; }
.sc-line b{ font-size:13px; display:block; color:var(--ink); }
.sc-line small{ font-size:11.5px; color:var(--ink-soft); }
.sc-line em{ font-weight:700; font-style:normal; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; }
.sc-line em.plus{ color:var(--glaze-dark); } .sc-line em.minus{ color:var(--clay); }

.sc-form{ display:flex; flex-direction:column; gap:8px; }
.sc-form label{ font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--ink-soft); font-weight:600; }
.sc-input{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:13px; color:var(--ink); }
.sc-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sc-total{
  display:flex; justify-content:space-between; align-items:center; background:rgba(168,69,31,.07);
  border:1px dashed var(--clay); border-radius:10px; padding:11px 14px; margin-top:4px;
}
.sc-total span{ font-size:12.5px; color:var(--clay-dark); font-weight:600; }
.sc-total b{ font-family:var(--font-display); font-size:19px; color:var(--clay-dark); }
.sc-pill-btn{
  background:var(--clay); color:#fff; text-align:center; padding:10px; border-radius:9px;
  font-weight:600; font-size:13px; cursor:default;
}

.sc-order-top{ font-size:11px; color:var(--ink-soft); padding:0 2px 6px; }
.sc-order-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.sc-order-actions .sc-pill{ background:var(--panel); border:1px solid var(--line); padding:5px 10px; border-radius:7px; font-size:12px; font-weight:600; color:var(--ink-soft); }
.sc-order-actions .sc-pill.primary{ background:var(--clay); border-color:var(--clay); color:#fff; }
.sc-order-search{ position:relative; margin-bottom:10px; }
.sc-order-search .sc-input{ display:flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12px; color:var(--ink-soft); }
.sc-order-search .sc-input em{ font-style:normal; font-size:10px; color:#8a8278; margin-left:4px; }
.sc-order-dd{ margin-top:6px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 8px 18px rgba(0,0,0,.08); }
.sc-order-dd-item{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-bottom:1px solid var(--line-soft); }
.sc-order-dd-item:last-child{ border-bottom:none; }
.sc-order-dd-item div{ flex:1; min-width:0; line-height:1.2; }
.sc-order-dd-item b{ font-size:12px; color:var(--ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-order-dd-item small{ font-size:11px; color:var(--ink-soft); font-family:ui-monospace,Menlo,Consolas,monospace; }
.sc-dd-add{ font-size:11px; background:var(--line-soft); color:var(--ink-soft); padding:2px 8px; border-radius:20px; font-weight:600; }
.sc-order-thumb{ width:36px; height:36px; border-radius:6px; border:1px solid var(--line-soft); background:#DCD5C4 center/cover no-repeat; flex:none; }
.sc-order-thumb.sm{ width:28px; height:28px; border-radius:5px; }
.sc-order{ border:1px solid var(--line-soft); border-radius:10px; overflow:hidden; }
.sc-order-head, .sc-order-row{
  display:grid; grid-template-columns:36px 1fr 1.6fr .7fr .8fr 24px; gap:6px; padding:7px 10px; font-size:11.5px; align-items:center;
}
.sc-order-head{ background:var(--panel); font-size:9px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft); font-weight:700; border-bottom:1px solid var(--line-soft); }
.sc-order-row{ border-bottom:1px solid var(--line-soft); }
.sc-order-row:last-child{ border-bottom:none; }
.sc-order-row span{ color:var(--ink); }
.sc-order-row .mono{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; }
.sc-order-row em{ font-style:normal; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:1px 6px; border-radius:10px; margin-left:4px; }
.sc-order-row em:first-of-type{ background:var(--warn-bg); color:var(--warn-ink); }
.sc-order-row .qty{ background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:3px 7px; font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:600; text-align:right; font-size:11px; }
.sc-order-row .rm{ text-align:center; color:var(--ink-soft); font-size:14px; cursor:default; }

/* 360 Studio mockup */
.sc-360-body{ padding:0 !important; overflow:hidden; gap:0 !important; }
.sc-360-tabs{ display:flex; gap:6px; padding:10px 12px; background:var(--panel); border-bottom:1px solid var(--line-soft); }
.sc-360-tabs span{ font-size:11px; font-weight:600; padding:5px 12px; border-radius:20px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); }
.sc-360-tabs span.active{ background:var(--clay); border-color:var(--clay); color:#fff; }
.sc-360-layout{ display:grid; grid-template-columns:150px 1fr; gap:0; min-height:210px; }
.sc-360-panel{ background:var(--panel); border-right:1px solid var(--line-soft); padding:10px; display:flex; flex-direction:column; gap:8px; }
.sc-360-card{ background:#fff; border:1px solid var(--line-soft); border-radius:8px; padding:8px 9px; }
.sc-360-card b{ font-size:10px; display:block; color:var(--ink); letter-spacing:.2px; }
.sc-360-card small{ font-size:10.5px; color:var(--ink-soft); }
.sc-360-card.accent{ background:rgba(168,69,31,.07); border-color:var(--clay); }
.sc-360-catalog{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; }
.sc-360-catalog span{ aspect-ratio:1/1; border-radius:6px; background:#DCD5C4 center/cover no-repeat; border:1.5px solid var(--line-soft); }
.sc-360-catalog span.active{ border-color:var(--clay); box-shadow:0 0 0 2px rgba(168,69,31,.2); }
.sc-360-pdf-mini{ display:inline-flex; align-items:center; gap:4px; margin-top:6px; background:var(--clay); color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; }
.sc-360-preview{ background:#F8F5EE; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; text-align:center; }
.sc-360-preview-box{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:18px 14px; display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; }
.sc-360-preview-box i{ font-size:28px; color:var(--clay); }
.sc-360-preview-box span{ font-weight:700; font-size:13px; color:var(--ink); }
.sc-360-preview-box small{ font-size:11px; color:var(--ink-soft); }
.sc-360-sizes{ display:flex; gap:6px; }
.sc-360-sizes span{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10px; background:#fff; border:1px solid var(--line); padding:3px 8px; border-radius:20px; color:var(--ink-soft); }

.sc-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sc-stats div{ background:var(--panel); border:1px solid var(--line-soft); border-radius:10px; padding:12px; text-align:center; }
.sc-stats b{ font-family:var(--font-display); font-size:1.25rem; display:block; color:var(--ink); }
.sc-stats span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft); }
.sc-table{ border:1px solid var(--line-soft); border-radius:10px; overflow:hidden; }
.sc-tr{ display:grid; grid-template-columns:1.4fr 1fr 1fr .9fr; gap:6px; padding:9px 12px; font-size:12px; align-items:center; }
.sc-tr.th{ background:var(--panel); font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft); font-weight:600; border-bottom:1px solid var(--line-soft); }
.sc-tr:not(.th){ border-bottom:1px solid var(--line-soft); }
.sc-tr:last-child{ border-bottom:none; }
.sc-tr span{ color:var(--ink); }

.sc-staff{ display:flex; flex-direction:column; gap:8px; }
.sc-person{
  display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line-soft);
  border-radius:10px; padding:10px 12px;
}
.sc-person.dim{ border-style:dashed; }
.sc-person .avatar{
  width:36px; height:36px; border-radius:50%; color:#fff; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.sc-person div{ flex:1; min-width:0; }
.sc-person b{ font-size:13px; display:block; color:var(--ink); }
.sc-person small{ font-size:11.5px; color:var(--ink-soft); }
.tag.add{ background:rgba(47,110,99,.12); color:var(--glaze-dark); border:1px dashed var(--glaze); }

.tour-text h3{ font-size:1.7rem; margin-bottom:14px; }
.tour-text p{ color:var(--ink-soft); line-height:1.75; font-size:1.02rem; }
.list-check{ list-style:none; padding:0; margin:20px 0 0; }
.list-check li{ position:relative; padding:7px 0 7px 30px; color:var(--ink); font-size:.98rem; }
.list-check li::before{
  content:'✓'; position:absolute; left:0; top:7px; width:20px; height:20px; border-radius:50%;
  background:rgba(47,110,99,.14); color:var(--glaze-dark); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- PDF report ---------- */
.section-pdf{
  background:
    radial-gradient(600px 320px at 90% 10%, rgba(47,110,99,.10), transparent 60%),
    linear-gradient(180deg, #fff 0%, #F8F5EE 100%);
}
.pdf-preview{ position:relative; max-width:520px; margin:0 auto; }
.pdf-toolbar{
  display:flex; align-items:center; gap:10px; background:#2B2826; border-radius:12px 12px 0 0;
  padding:10px 14px;
}
.pdf-dots{ display:flex; gap:6px; }
.pdf-dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22); }
.pdf-dots i:nth-child(1){ background:#E0655A; } .pdf-dots i:nth-child(2){ background:#E7B455; } .pdf-dots i:nth-child(3){ background:#62B587; }
.pdf-name{ flex:1; color:#C9C0AE; font-size:12px; display:flex; align-items:center; gap:6px; }
.pdf-name i{ color:#E4572E; font-size:15px; }
.pdf-dl{ color:#E7C7A0; font-size:15px; text-decoration:none; transition:color .15s ease; }
.pdf-dl:hover{ color:#fff; }
.pdf-sheet{
  background:#fff; padding:26px 28px 22px; border-radius:0 0 12px 12px;
  box-shadow:0 24px 50px rgba(38,34,32,.22);
  position:relative;
}
.pdf-sheet::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:12px;
  background:linear-gradient(180deg, transparent, rgba(38,34,32,.10));
  border-radius:0 0 12px 12px; pointer-events:none;
}
.pdf-head{ display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1.5px solid var(--ink); }
.pdf-logo{ width:32px; height:32px; border-radius:7px; overflow:hidden; flex:none; }
.pdf-head b{ display:block; font-family:var(--font-display); font-size:16px; color:var(--ink); letter-spacing:.2px; }
.pdf-head span{ font-size:10.5px; color:var(--ink-soft); }
.pdf-sec{
  font-size:11.5px; font-weight:700; color:var(--ink); margin:12px 0 7px; padding-bottom:4px;
  border-bottom:1.5px solid var(--clay); display:flex; align-items:baseline; gap:6px;
}
.pdf-sec::before{ content:''; width:6px; height:6px; border-radius:1px; background:var(--clay); display:inline-block; transform:rotate(45deg); }
.pdf-cards{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.pdf-card{
  display:flex; gap:8px; align-items:center; border:1px solid var(--line-soft); border-radius:8px;
  padding:6px; background:#fff;
}
.pdf-img{ width:34px; height:34px; border-radius:6px; background:#DCD5C4 center/cover no-repeat; flex:none; }
.pdf-card-info{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.pdf-card-info b{ font-size:11px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pdf-card-info span{ font-size:9.5px; color:var(--ink-soft); font-family:ui-monospace,Menlo,Consolas,monospace; }
.pdf-card-info em{ font-style:normal; font-size:11px; font-weight:700; color:var(--glaze-dark); }
.pdf-card-info em.clay{ color:var(--clay); }
.pdf-caption{
  text-align:center; margin-top:14px; font-size:12.5px; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.pdf-caption::before{
  content:''; width:8px; height:8px; border-radius:50%; background:#62B587; display:inline-block;
}

/* ---------- How it works ---------- */
.step{ text-align:center; padding:34px 24px; position:relative; background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); height:100%; }
.step .step-num{
  position:absolute; top:16px; right:20px; font-family:var(--font-display); font-size:2.4rem; font-weight:700;
  color:var(--line); line-height:1;
}
.step .icon{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 16px; }
.step h3{ font-size:1.15rem; margin-bottom:10px; }
.step p{ color:var(--ink-soft); font-size:.92rem; line-height:1.6; margin:0; }

/* ---------- Pricing ---------- */
.price-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); padding:30px 26px;
  height:100%; display:flex; flex-direction:column; position:relative; transition:all .18s ease;
}
.price-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.price-card.featured{
  border:2px solid var(--clay); box-shadow:0 12px 34px rgba(168,69,31,.16);
}
.price-card .ribbon{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--clay); color:#fff; font-size:11px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; padding:5px 16px; border-radius:20px; white-space:nowrap;
}
.price-head h3{ font-size:1.35rem; margin-bottom:4px; }
.price-head p{ color:var(--ink-soft); font-size:.85rem; margin:0; }
.price{ margin:22px 0; display:flex; align-items:baseline; gap:4px; }
.price .cur{ font-size:1.1rem; color:var(--clay); font-weight:700; }
.price{ font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:var(--ink); }
.price .per{ font-size:.92rem; color:var(--ink-soft); font-family:var(--font-body); font-weight:500; }
.price-feats{ list-style:none; padding:0; margin:0 0 24px; flex:1; }
.price-feats li{ padding:8px 0; color:var(--ink); font-size:.95rem; display:flex; gap:10px; }
.price-feats i{ color:var(--glaze); }
.price-note{ font-size:.85rem; color:var(--ink-soft); }
.price-addon{
  display:flex; align-items:center; gap:16px; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; flex-wrap:wrap;
}
.price-addon-icon{ width:44px; height:44px; border-radius:10px; background:rgba(168,69,31,.12); color:var(--clay); display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; }
.price-addon-text{ flex:1; min-width:200px; }
.price-addon-text h4{ font-size:1.05rem; margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.price-addon-text h4 span{ font-size:9px; background:var(--clay); color:#fff; padding:2px 7px; border-radius:20px; letter-spacing:.5px; }
.price-addon-text p{ margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.5; }
.price-addon-price{ text-align:right; }
.price-addon-price b{ font-family:var(--font-display); font-size:1.5rem; color:var(--ink); }
.price-addon-price span{ font-size:.85rem; color:var(--ink-soft); }

/* ---------- Testimonials ---------- */
.t-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); padding:28px 26px; height:100%;
  display:flex; flex-direction:column; transition:all .18s ease;
}
.t-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.t-card .stars{ color:#E7A524; font-size:15px; letter-spacing:2px; margin-bottom:14px; }
.t-card p{ color:var(--ink-soft); font-size:.97rem; line-height:1.7; flex:1; }
.t-card .who{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.t-card .who .av{
  width:42px; height:42px; border-radius:50%; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:16px;
}
.av1{ background:var(--clay); } .av2{ background:var(--glaze); } .av3{ background:var(--warn-ink); }
.t-card .who b{ display:block; font-size:14.5px; }
.t-card .who small{ color:var(--ink-soft); }

/* ---------- FAQ ---------- */
.nd-accordion .accordion-item{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius) !important; margin-bottom:12px; overflow:hidden; }
.nd-accordion .accordion-button{
  font-family:var(--font-body); font-weight:600; color:var(--ink); font-size:1rem; padding:18px 22px;
  background:#fff;
}
.nd-accordion .accordion-button:not(.collapsed){ background:rgba(168,69,31,.05); color:var(--clay-dark); box-shadow:none; }
.nd-accordion .accordion-button:focus{ box-shadow:none; }
.nd-accordion .accordion-button::after{ filter:hue-rotate(20deg); }
.nd-accordion .accordion-body{ color:var(--ink-soft); line-height:1.7; font-size:.97rem; padding:6px 22px 20px; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(120deg, var(--clay-dark) 0%, var(--clay) 60%, var(--glaze) 140%);
  color:#fff; padding:90px 0;
}
.cta-banner h2{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom:14px; }
.cta-banner p{ color:rgba(255,255,255,.85); font-size:1.05rem; max-width:560px; margin:0 auto 30px; }

/* ---------- Contact ---------- */
.contact-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); padding:26px; text-align:center; height:100%;
}
.contact-card .icon{ width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 14px; }
.contact-card h3{ font-size:1.15rem; margin-bottom:4px; }
.contact-card p{ color:var(--ink-soft); font-size:.9rem; margin-bottom:6px; }
.contact-card a{ font-weight:600; text-decoration:none; word-break:break-all; }
.contact-form{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); padding:34px;
  box-shadow:var(--shadow);
}
.contact-form .form-label{ font-weight:600; font-size:.9rem; }
.contact-form .form-control{
  border:1.5px solid var(--line); border-radius:9px; padding:.7rem .9rem; font-size:.95rem; background:var(--panel);
}
.contact-form .form-control:focus{ border-color:var(--glaze); box-shadow:0 0 0 .2rem rgba(47,110,99,.15); background:#fff; }
.form-success{
  background:rgba(47,110,99,.1); border:1px solid rgba(47,110,99,.3); color:var(--glaze-dark);
  border-radius:10px; padding:13px 16px; font-weight:600; text-align:center; margin-top:10px;
}

/* ---------- Performance: defer offscreen sections (boost mobile score) ---------- */
.section, .section-alt, .section-pdf, .stats-section, .cta-banner, .footer{ content-visibility:auto; contain-intrinsic-size:800px; }
.hero{ content-visibility:visible; }

/* ---------- Footer ---------- */
.footer{ background:#1E1B19; color:#B7AF9D; padding:70px 0 30px; }
.footer .navbar-brand{ color:#F3EEE3; }
.footer .brand-text strong{ font-family:var(--font-display); font-size:19px; }
.footer .brand-text small{ font-size:10.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#B4572E; }
.footer-about{ font-size:.93rem; line-height:1.7; max-width:360px; }
.footer-contact{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.footer-contact a{ color:#C9C0AE; text-decoration:none; font-size:.93rem; display:inline-flex; align-items:center; gap:8px; }
.footer-contact a:hover{ color:#fff; }
.footer-contact i{ color:#E7A96B; }
.footer h4{ color:#F3EEE3; font-size:1.05rem; margin-bottom:16px; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:10px; }
.footer-links a{ color:#B7AF9D; text-decoration:none; font-size:.93rem; }
.footer-links a:hover{ color:#E7A96B; }
.footer-cta-text{ font-size:.93rem; line-height:1.6; margin-bottom:16px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); font-size:.85rem; }
.made-with i{ color:var(--clay); }

/* ---------- Back to top ---------- */
.back-top{
  position:fixed; right:20px; bottom:84px; width:46px; height:46px; border-radius:12px;
  background:var(--clay); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:20px; text-decoration:none; opacity:0; visibility:hidden; transform:translateY(12px);
  transition:all .25s ease; box-shadow:0 8px 20px rgba(168,69,31,.35); z-index:1050;
}
.back-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-top:hover{ background:var(--clay-dark); color:#fff; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .hero{ padding:120px 0 0; }
  .browser-mockup{ max-width:560px; margin:0 auto; }
  .app-frame{ min-height:0; }
  .app-table td:nth-child(3), .app-table th:nth-child(3){ display:none; }
}
@media (max-width: 575.98px){
  .section{ padding:72px 0; }
  .app-sidebar{ width:92px; }
  .app-sidebar .nav-item{ font-size:11px; padding:7px 6px; }
  .app-pills .pill{ min-width:0; padding:6px 8px; }
  .app-pills .pill:nth-child(3){ display:none; }
  .app-bottom span:last-child{ display:none; }
  .sc-bar{ width:70px; }
  .contact-form{ padding:24px 18px; }
}
/* ---------- WhatsApp floating ---------- */
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:9999; width:56px; height:56px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.22); text-decoration:none; transition:transform .2s }
.wa-float:hover{ transform:scale(1.07) }
.wa-tooltip{ position:absolute; right:62px; top:50%; transform:translateY(-50%); background:#262220; color:#fff; font-size:12px; font-weight:600; padding:6px 10px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s }
.wa-float:hover .wa-tooltip{ opacity:1 }
@media (max-width:480px){ .wa-float{ bottom:14px; right:14px; width:52px; height:52px } .back-top{ right:16px; bottom:74px; width:42px; height:42px } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .browser-mockup, .feature-card, .price-card, .t-card{ transition:none; }
}