/* ============================================================
   INTELIGOLD — Design System
   RFID-driven jewellery retail management
   Brand: maroon + gold on ivory · refined serif + clean sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Cormorant:ital,wght@0,500;0,600;0,700;1,600&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,600&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Brand — exact */
  --maroon:        #9E1B32;
  --maroon-dark:   #7A1426;
  --gold:          #C8951E;
  --gold-soft:     #E0C067;   /* lighter arc tint, from logo */
  --ink:           #3A2A1C;
  --ivory:         #FFFCF7;
  --success:       #2E7D46;
  --alert:         #B22234;

  /* Derived neutrals (warm, never gray-blue) */
  --ivory-2:       #FBF6EE;   /* faint warm panel */
  --ivory-3:       #F4EBDD;   /* hairline / card edge tint */
  --ink-70:        rgba(58,42,28,.70);
  --ink-55:        rgba(58,42,28,.55);
  --ink-40:        rgba(58,42,28,.40);
  --line:          rgba(58,42,28,.12);
  --line-soft:     rgba(58,42,28,.08);

  /* On-maroon */
  --on-maroon:     #FFF4E8;
  --on-maroon-dim: rgba(255,244,232,.72);
  --maroon-line:   rgba(255,244,232,.18);

  /* Gold accent intensity (tweakable). 1 = default. */
  --gold-intensity: 1;
  --gold-glow: color-mix(in oklab, var(--gold) calc(38% * var(--gold-intensity)), transparent);

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Radii — restrained, premium (not pill-soft) */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px;

  /* Shadows — soft, warm, low */
  --shadow-sm: 0 1px 2px rgba(58,42,28,.05), 0 2px 6px rgba(58,42,28,.04);
  --shadow-md: 0 4px 14px rgba(58,42,28,.07), 0 1px 3px rgba(58,42,28,.05);
  --shadow-lg: 0 18px 48px rgba(58,42,28,.13), 0 4px 14px rgba(58,42,28,.07);
  --shadow-maroon: 0 22px 60px rgba(122,20,38,.30);

  --container: 1200px;
  --nav-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--ivory);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,h5,p{ margin:0; }
::selection{ background:var(--gold-glow); color:var(--ink); }

/* ---------- Type ---------- */
.display{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.018em;
  font-size:clamp(44px, 7vw, 92px);
  font-optical-sizing:auto;
}
h1,.h1{ font-family:var(--font-display); font-weight:600; line-height:1.06; letter-spacing:-.015em; font-size:clamp(38px,5.2vw,68px); }
h2,.h2{ font-family:var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-.012em; font-size:clamp(30px,3.6vw,48px); }
h3,.h3{ font-family:var(--font-display); font-weight:600; line-height:1.18; letter-spacing:-.008em; font-size:clamp(22px,2.2vw,30px); }
h4,.h4{ font-family:var(--font-sans); font-weight:600; font-size:19px; letter-spacing:-.005em; }

.eyebrow{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--maroon);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1.5px;
  background:var(--gold);
  display:inline-block;
}
.eyebrow.on-maroon{ color:var(--gold-soft); }
.eyebrow.center{ justify-content:center; }
.eyebrow.no-rule::before{ display:none; }

.lead{ font-size:clamp(18px,1.6vw,21px); line-height:1.55; color:var(--ink-70); font-weight:400; }
.lead.on-maroon{ color:var(--on-maroon-dim); }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,4vw,40px); }
.container.wide{ max-width:1320px; }
.container.narrow{ max-width:880px; }
section{ position:relative; }
.section-pad{ padding-block:clamp(64px,9vw,128px); }
.section-pad-sm{ padding-block:clamp(48px,6vw,88px); }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.maxw-680{ max-width:680px; }
.maxw-760{ max-width:760px; }

/* Surfaces */
.bg-ivory{ background:var(--ivory); }
.bg-ivory-2{ background:var(--ivory-2); }
.bg-maroon{ background:var(--maroon); color:var(--on-maroon); }
.bg-maroon-grad{
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in oklab, var(--maroon) 86%, #000) 0%, transparent 60%),
    linear-gradient(155deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  color:var(--on-maroon);
}
.bg-maroon h1,.bg-maroon h2,.bg-maroon h3,
.bg-maroon-grad h1,.bg-maroon-grad h2,.bg-maroon-grad h3{ color:var(--on-maroon); }

/* Hairline divider */
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-sans); font-weight:600; font-size:15.5px;
  padding:14px 26px; border-radius:var(--r-md);
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .2s, border-color .25s;
  white-space:nowrap; line-height:1;
}
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.btn .ico{ width:17px; height:17px; transition:transform .3s var(--ease); }
.btn:hover .ico{ transform:translateX(3px); }

.btn-gold{ background:var(--gold); color:#3a2a08; box-shadow:0 6px 18px var(--gold-glow); }
.btn-gold:hover{ background:#b9871a; transform:translateY(-2px); box-shadow:0 10px 26px var(--gold-glow); }
.btn-maroon{ background:var(--maroon); color:var(--on-maroon); }
.btn-maroon:hover{ background:var(--maroon-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--ink); transform:translateY(-2px); }
/* reversed (on maroon) */
.btn-outline.on-maroon{ color:var(--on-maroon); border-color:var(--maroon-line); }
.btn-outline.on-maroon:hover{ border-color:var(--on-maroon); background:rgba(255,244,232,.06); }
.btn-lg{ padding:17px 32px; font-size:16.5px; }
.btn-ghost{ background:transparent; padding-inline:8px; }
.btn-ghost:hover{ color:var(--maroon); }

/* Text link with gold underline reveal */
.link-gold{ position:relative; font-weight:600; color:var(--maroon); display:inline-flex; align-items:center; gap:7px; }
.link-gold::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px;
  background:var(--gold); transition:right .35s var(--ease);
}
.link-gold:hover::after{ right:0; }
.link-gold .ico{ width:15px; height:15px; transition:transform .3s var(--ease); }
.link-gold:hover .ico{ transform:translateX(3px); }
.link-gold.on-maroon{ color:var(--on-maroon); }

/* ---------- Reversed typographic lockup (on maroon) ---------- */
.lockup{ display:inline-flex; align-items:center; gap:14px; }
.lockup .mark{ width:40px; height:34px; flex:none; }
.lockup .word{ font-family:var(--font-display); font-weight:600; font-size:28px; letter-spacing:-.01em; line-height:1; }
.lockup .word .i{ color:var(--on-maroon); }
.lockup .word .g{ color:var(--gold); }
.lockup.sm .mark{ width:32px; height:27px; } .lockup.sm .word{ font-size:23px; }
.lockup.lg .mark{ width:54px; height:46px; } .lockup.lg .word{ font-size:38px; }

/* ---------- Signal mark (gem + pulsing RFID arcs) ---------- */
.signal{ display:inline-block; position:relative; }
.signal svg{ display:block; overflow:visible; }
.signal .arc{ transform-origin:var(--ox,18%) 50%; }
@media (prefers-reduced-motion: no-preference){
  body:not(.motion-off) .signal.animate .arc{ animation:arcPulse 2.8s var(--ease) infinite; opacity:0; }
  body:not(.motion-off) .signal.animate .arc.a2{ animation-delay:.42s; }
  body:not(.motion-off) .signal.animate .arc.a3{ animation-delay:.84s; }
}
@keyframes arcPulse{
  0%{ opacity:0; transform:scale(.82); }
  22%{ opacity:1; }
  70%{ opacity:.0; transform:scale(1.12); }
  100%{ opacity:0; transform:scale(1.12); }
}

/* ---------- Cards ---------- */
.card{
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:30px;
  position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card .hair{ position:absolute; top:0; left:24px; right:24px; height:2px; background:linear-gradient(90deg, var(--gold), transparent 75%); border-radius:2px; opacity:.0; transition:opacity .35s var(--ease); }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--ivory-3); }
.card:hover .hair{ opacity:1; }
.card .card-ico{ width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:var(--ivory-2); border:1px solid var(--line); color:var(--maroon); margin-bottom:18px; }
.card .card-ico svg{ width:24px; height:24px; }
.card h3{ font-size:21px; margin-bottom:9px; }
.card p{ color:var(--ink-70); font-size:15.5px; line-height:1.6; }

/* feature card with persistent gold hairline (top) */
.card.hairline{ padding-top:32px; }
.card.hairline::before{ content:""; position:absolute; top:0; left:0; width:64px; height:3px; background:var(--gold); border-top-left-radius:var(--r-lg); }

.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Pills / chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.01em;
  padding:7px 14px; border-radius:100px;
  background:var(--ivory-2); border:1px solid var(--line); color:var(--ink-70);
}
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); }
.chip.on-maroon{ background:rgba(255,244,232,.08); border-color:var(--maroon-line); color:var(--on-maroon); }
.chip.success{ color:var(--success); border-color:color-mix(in oklab,var(--success) 30%,transparent); background:color-mix(in oklab,var(--success) 8%,var(--ivory)); }
.chip.success .dot{ background:var(--success); }

/* ---------- Stats / count-up ---------- */
.stat .val{ font-family:var(--font-display); font-weight:600; font-size:clamp(36px,4vw,54px); line-height:1; letter-spacing:-.02em; color:var(--maroon); }
.stat .val .suffix{ color:var(--gold); }
.stat .lbl{ margin-top:10px; font-size:14px; color:var(--ink-55); letter-spacing:.02em; }
.bg-maroon .stat .val,.bg-maroon-grad .stat .val{ color:var(--on-maroon); }
.bg-maroon .stat .val .suffix,.bg-maroon-grad .stat .val .suffix{ color:var(--gold-soft); }
.bg-maroon .stat .lbl,.bg-maroon-grad .stat .lbl{ color:var(--on-maroon-dim); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; } .reveal.d5{ transition-delay:.40s; }
body.motion-off .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

/* ---------- Loader splash ---------- */
#ig-splash{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:var(--maroon);
  background-image:radial-gradient(120% 90% at 80% 10%, color-mix(in oklab,var(--maroon) 85%,#000), var(--maroon-dark));
  transition:opacity .6s var(--ease), visibility .6s;
}
#ig-splash.done{ opacity:0; visibility:hidden; }
#ig-splash .splash-mark{ width:180px; max-width:46vw; }
body.motion-off #ig-splash{ display:none; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:var(--on-maroon-dim); padding-block:64px 36px; }
.footer a{ color:var(--on-maroon-dim); transition:color .2s; }
.footer a:hover{ color:var(--gold-soft); }
.footer h5{ font-family:var(--font-sans); font-weight:600; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 16px; }
.footer .cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:14.5px; }
.footer .foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,244,232,.12); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:rgba(255,244,232,.5); }

/* ---------- Utility ---------- */
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-2{ gap:8px; } .gap-3{ gap:12px; } .gap-4{ gap:16px; } .gap-5{ gap:24px; }
.wrap{ flex-wrap:wrap; }
.mt-2{ margin-top:8px; } .mt-3{ margin-top:12px; } .mt-4{ margin-top:16px; } .mt-5{ margin-top:24px; } .mt-6{ margin-top:32px; } .mt-7{ margin-top:48px; }
.mb-5{ margin-bottom:24px; } .mb-6{ margin-bottom:32px; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .footer .cols{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .footer .cols{ grid-template-columns:1fr 1fr; }
  .btn{ width:100%; }
  .hero-cta .btn{ width:100%; }
}