/* Sminetech Solutions — shared design tokens and base styles */
/* Loaded by every page before the page-specific stylesheet */

/* --- RESET --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* --- DESIGN TOKENS --- */
:root{
  --bg:#04091A;--bg2:#060D22;--bg3:#0A1530;--bg4:#0E1D3E;
  --blue:#1B6EF3;--blue2:#4A8FFF;--cyan:#00C8F0;--cyan2:#80E4F8;
  --text:#ECF2FF;--muted:#7A8EAA;--muted2:#5A6E88;
  --border:rgba(255,255,255,0.07);--border2:rgba(27,110,243,0.3);--border3:rgba(27,110,243,0.15);
  --card:rgba(255,255,255,0.025);--card-h:rgba(27,110,243,0.07);
  --green:#22C27A;--amber:#F5A623;--red:#E85C5C;
  --serif:'DM Serif Display',serif;--sans:'Outfit',sans-serif;
  --grad:linear-gradient(135deg,#1B6EF3,#00C8F0);
  --grad2:linear-gradient(135deg,#00C8F0,#1B6EF3);
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;
}

/* --- BASE --- */
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:400;line-height:1.6;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:radial-gradient(rgba(27,110,243,0.055) 1px,transparent 1px);background-size:30px 30px;pointer-events:none;z-index:0}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
section{position:relative;z-index:1}

/* --- ICON SYSTEM --- */
.ico{width:18px;height:18px;flex-shrink:0;display:inline-block;vertical-align:-3px;color:var(--blue2)}
svg.ico{stroke:currentColor}
.modal-close .ico{width:14px;height:14px;vertical-align:0;color:var(--muted)}
.modal-close:hover .ico{color:var(--text)}

/* --- REVEAL ANIMATIONS --- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;animation:revealFallback 0s 1.5s forwards}
.reveal.visible{opacity:1;transform:none}
@keyframes revealFallback{to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* --- SERVICES DROPDOWN (shared across all pages) --- */
.has-dd{position:relative}
.dd-toggle{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.dd-toggle .caret{width:12px;height:12px;transition:transform .2s}
.has-dd:hover .dd-toggle .caret,.has-dd.open .dd-toggle .caret{transform:rotate(180deg)}
.dd{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);min-width:240px;padding:.5rem;box-shadow:0 12px 40px rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s,transform .2s;display:flex;flex-direction:column;z-index:250}
.has-dd:hover .dd,.has-dd.open .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
.dd a{display:block;padding:.55rem .85rem;font-size:13.5px;color:var(--muted);border-radius:var(--r-sm);transition:background .15s,color .15s;white-space:nowrap}
.dd a:hover{background:var(--card-h);color:var(--text)}

@media (max-width:768px){
  .has-dd{width:100%}
  .dd-toggle{justify-content:center;width:100%}
  .dd{position:static;transform:none;opacity:1;visibility:visible;background:var(--bg2);border:none;border-radius:0;padding:0;box-shadow:none;max-height:0;overflow:hidden;transition:max-height .25s ease;min-width:0}
  .has-dd.open .dd{max-height:500px;transform:none;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.04)}
  .dd a{padding:11px 1rem;font-size:14px;text-align:center;border-radius:0}
}

/* --- FORM SUCCESS PANEL --- */
.form-success{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2.5rem 1rem;gap:1rem;animation:fadeUp .4s ease}
.form-success-icon{width:60px;height:60px;border-radius:50%;background:rgba(34,194,122,.12);border:1px solid rgba(34,194,122,.35);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.form-success-icon svg{width:28px;height:28px;stroke:#22C27A}
.form-success-h{font-size:22px;font-weight:700;color:var(--text);margin:0}
.form-success-p{font-size:14.5px;color:var(--muted);line-height:1.65;max-width:360px;margin:0}