/* ==========================================================================
   IQIA ACADEMY — V2
   Design tokens matched to iquantumlaser.com
   ========================================================================== */
:root{
  --color-white:#ffffff;
  --color-bg-alt:#f5f5f7;
  --color-ink:#0a0a0c;
  --color-graphite:#38383d;
  --color-silver:#c9cbce;
  --color-silver-light:#e7e8ea;
  --color-accent:#00489d;
  --color-accent-dark:#003572;
  --color-warmgray:#8e8a85;
  --color-line:#e2e2e5;

  --color-danger:#b3261e;
  --color-danger-bg:#fdecea;
  --color-warn-bg:#fff6e5;
  --color-warn-line:#f0c674;

  --font-head:'Montserrat', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --maxw:1180px;
  --pad:clamp(20px, 5vw, 64px);
  --radius:10px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-white);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.15;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;}
a{color:var(--color-accent); text-decoration:none;}
a:hover{text-decoration:underline;}
ul{margin:0; padding:0; list-style:none;}
img,svg{display:block; max-width:100%;}
button{font-family:inherit;}
table{border-collapse:collapse; width:100%;}

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
.section{padding-top:clamp(56px,8vw,96px); padding-bottom:clamp(56px,8vw,96px);}
.section-alt{background:var(--color-bg-alt);}
.section-dark{background:var(--color-ink); color:var(--color-white);}
.section-dark h1,.section-dark h2,.section-dark h3{color:var(--color-white);}
.section-dark p{color:var(--color-silver-light);}
.section-border{border-top:1px solid var(--color-line);}

.kicker{font-size:12.5px; letter-spacing:.14em; color:var(--color-accent); font-weight:700; text-transform:uppercase;}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; font-size:14px; font-weight:600;
  border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:all .15s var(--ease); white-space:nowrap; font-family:var(--font-body);
}
.btn.btn-primary{background:var(--color-ink); color:var(--color-white);}
.btn.btn-primary:hover{background:var(--color-accent); text-decoration:none;}
.btn.btn-secondary{background:transparent; color:var(--color-ink); border-color:var(--color-line);}
.btn.btn-secondary:hover{border-color:var(--color-ink); text-decoration:none;}
.btn.btn-on-dark{background:var(--color-white); color:var(--color-ink);}
.btn.btn-on-dark:hover{background:var(--color-accent); color:var(--color-white); text-decoration:none;}

/* ==========================================================================
   NAV
   ========================================================================== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--color-line);
}
.navrow{display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; gap:24px;}
.logo{display:flex; align-items:center; gap:10px;}
.logo img{height:30px; width:auto;}
.logo .mark{font-family:var(--font-head); font-weight:700; font-size:16px; color:var(--color-ink);}
.logo .sub{font-size:10.5px; letter-spacing:.1em; color:var(--color-warmgray); font-weight:600;}

nav.links{display:flex; align-items:center; gap:30px; flex:1;}
nav.links a{font-size:14px; font-weight:500; color:var(--color-graphite);}
nav.links a:hover{color:var(--color-accent); text-decoration:none;}
nav.links a.active{color:var(--color-accent);}
.navcta{display:flex; flex:none;}
.navcta-mobile{display:none;}
.navtoggle{display:none; background:none; border:none; color:var(--color-ink); padding:6px; cursor:pointer;}
.navtoggle svg{width:22px; height:22px;}

@media (max-width:900px){
  nav.links{
    position:fixed; inset:64px 0 0 0; background:var(--color-white);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px var(--pad) 28px; border-top:1px solid var(--color-line);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s var(--ease), transform .18s var(--ease);
    overflow-y:auto;
  }
  nav.links.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  nav.links a{width:100%; padding:14px 0; border-bottom:1px solid var(--color-line); font-size:16px;}
  .navcta{display:none;}
  .navcta-mobile{display:flex; margin-top:16px;}
  .navtoggle{display:block;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding-top:clamp(56px,9vw,100px); padding-bottom:clamp(48px,7vw,80px);}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,6vw,64px); align-items:center;}
.hero h1{font-size:clamp(32px,5vw,52px);}
.hero .lede{margin-top:20px; max-width:52ch; color:var(--color-graphite); font-size:17px;}
.hero .ctas{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.hero-media{border-radius:20px; overflow:hidden; border:1px solid var(--color-line); box-shadow:0 20px 60px rgba(0,0,0,.08);}
.hero-media img{width:100%; height:auto; display:block;}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr;}}

/* ==========================================================================
   SAFETY BANNER (shared component — every page)
   ========================================================================== */
.safety-banner{
  background:var(--color-danger-bg); border-top:1px solid #f3c6c2; border-bottom:1px solid #f3c6c2;
  padding:14px 0;
}
.safety-banner .wrap{display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--color-danger); font-weight:500;}
.safety-banner svg{width:18px; height:18px; flex:none;}
.safety-banner a{color:var(--color-danger); text-decoration:underline; font-weight:700;}

.safety-callout{
  background:var(--color-danger-bg); border:1px solid #f3c6c2; border-radius:var(--radius);
  padding:22px 26px; display:flex; gap:16px;
}
.safety-callout svg{width:24px; height:24px; flex:none; stroke:var(--color-danger);}
.safety-callout h3{color:var(--color-danger); font-size:15px; margin-bottom:6px;}
.safety-callout p{font-size:14px; color:#7a2b25; line-height:1.6;}

.warn-callout{
  background:var(--color-warn-bg); border:1px solid var(--color-warn-line); border-radius:var(--radius);
  padding:20px 24px;
}
.warn-callout h3{font-size:14px; color:#8a6100; margin-bottom:6px;}
.warn-callout p{font-size:13.5px; color:#6b4c00; line-height:1.6;}

.disclaimer-box{
  background:var(--color-bg-alt); border:1px solid var(--color-line); border-radius:var(--radius);
  padding:24px 28px; font-size:13.5px; color:var(--color-graphite); line-height:1.7;
}
.disclaimer-box strong{color:var(--color-ink);}

/* ==========================================================================
   SECTION HEADS / GRIDS
   ========================================================================== */
.section-head{margin-bottom:clamp(32px,5vw,48px);}
.section-head h2{font-size:clamp(24px,3.2vw,34px);}
.section-head p{color:var(--color-graphite); margin-top:12px; max-width:60ch;}

.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:980px){.card-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.card-grid{grid-template-columns:1fr;}}
.info-card{
  background:var(--color-white); border:1px solid var(--color-line); border-radius:var(--radius);
  padding:26px 24px;
}
.info-card svg{width:26px; height:26px; stroke:var(--color-accent); margin-bottom:14px;}
.info-card h3{font-size:15px; margin-bottom:8px;}
.info-card p{font-size:13.5px; color:var(--color-graphite); line-height:1.6;}

/* Treatment landing cards */
.treatment-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:980px){.treatment-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.treatment-grid{grid-template-columns:1fr;}}
.treatment-card{
  display:block; background:var(--color-white); border:1px solid var(--color-line); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.treatment-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.09); transform:translateY(-2px); text-decoration:none;}
.treatment-card .thumb{aspect-ratio:16/10; background:var(--color-bg-alt); position:relative; overflow:hidden;}
.treatment-card .thumb img{width:100%; height:100%; object-fit:cover;}
.treatment-card .thumb .risk-tag{
  position:absolute; top:12px; left:12px; background:var(--color-danger); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; padding:5px 10px; border-radius:999px;
}
.treatment-card .body{padding:20px 22px;}
.treatment-card h3{font-size:16px; color:var(--color-ink); margin-bottom:6px;}
.treatment-card p{font-size:13.5px; color:var(--color-graphite);}
.treatment-card .go{margin-top:12px; font-size:13px; font-weight:600; color:var(--color-accent);}
.treatment-card.soon{opacity:.55;}
.treatment-card.soon:hover{transform:none; box-shadow:none;}

/* ==========================================================================
   PROTOCOL / PARAMETER TABLES
   ========================================================================== */
.protocol-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:820px){.protocol-grid{grid-template-columns:1fr;}}
.protocol-card{border:1px solid var(--color-line); border-radius:var(--radius); padding:22px 22px; position:relative;}
.protocol-card.recommended{border-color:var(--color-accent); box-shadow:0 0 0 1px var(--color-accent);}
.protocol-card .tag{position:absolute; top:-11px; right:16px; background:var(--color-accent); color:#fff; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px;}
.protocol-card h3{font-size:15px; margin-bottom:14px;}
.protocol-card .stat{display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--color-silver-light);}
.protocol-card .stat b{color:var(--color-ink);}
.protocol-card .stat span:first-child{color:var(--color-warmgray);}

.param-table{width:100%; font-size:14px; border:1px solid var(--color-line); border-radius:var(--radius); overflow:hidden;}
.param-table th{background:var(--color-ink); color:#fff; text-align:left; padding:12px 16px; font-size:12.5px; letter-spacing:.04em; font-weight:600;}
.param-table td{padding:12px 16px; border-top:1px solid var(--color-line);}
.param-table tr:nth-child(even) td{background:var(--color-bg-alt);}
.table-scroll{overflow-x:auto;}

.step-row{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
@media (max-width:900px){.step-row{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.step-row{grid-template-columns:1fr;}}
.step-item{text-align:center;}
.step-item .num{
  width:30px; height:30px; border-radius:50%; background:var(--color-ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
  margin:0 auto 10px;
}
.step-item h4{font-size:13.5px; margin-bottom:6px;}
.step-item p{font-size:12.5px; color:var(--color-graphite); line-height:1.5;}

/* Before/after */
.ba-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){.ba-grid{grid-template-columns:1fr 1fr;}}
.ba-card{border:1px solid var(--color-line); border-radius:var(--radius); overflow:hidden;}
.ba-card .imgs{display:grid; grid-template-columns:1fr 1fr;}
.ba-card img{width:100%; aspect-ratio:1/1; object-fit:cover;}
.ba-card .lbl{text-align:center; font-size:11px; font-weight:600; letter-spacing:.04em; padding:6px 0; color:var(--color-warmgray);}
.ba-card .cap{padding:10px 14px; font-size:12.5px; color:var(--color-ink); font-weight:600; border-top:1px solid var(--color-line);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--color-ink); color:var(--color-silver-light); padding-top:56px; padding-bottom:32px;}
.foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12);}
.foot-mark{font-family:var(--font-head); font-weight:700; font-size:16px; color:#fff;}
.foot-col h4{font-size:12.5px; letter-spacing:.08em; color:var(--color-warmgray); font-weight:600; margin-bottom:14px; text-transform:uppercase;}
.foot-col ul{display:flex; flex-direction:column; gap:9px;}
.foot-col a{font-size:13.5px; color:var(--color-silver-light);}
.foot-col a:hover{color:#fff;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--color-warmgray);}
.foot-bottom a{color:var(--color-warmgray);}
.foot-bottom a:hover{color:#fff;}

/* Utility */
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
@media (max-width:820px){.grid-2{grid-template-columns:1fr;}}
.text-center{text-align:center;}
.small{font-size:13px; color:var(--color-warmgray);}

/* Cross-brand link in nav */
.logo-group{display:flex; align-items:center; gap:14px;}
.logo-divider{width:1px; height:20px; background:var(--color-line);}
.partner-logo{display:flex; align-items:center; opacity:.8; transition:opacity .15s var(--ease);}
.partner-logo:hover{opacity:1;}
.partner-logo img{height:20px; width:auto;}
@media (max-width:560px){.partner-logo img{height:16px;}}
.social-icons{display:flex; gap:12px;}
.social-icons a{color:var(--color-silver-light); transition:color .15s var(--ease);}
.social-icons a:hover{color:#fff;}