/* =====================================================
   SERVICE SYSTEM — shared base for all service pages
   service-system.css v2
===================================================== */

/* BASE */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
	--bg:#0a0a0a;--bg3:#141414;--bg4:#1a1a1a;
	--light:#f5f2ed;--w:#f0ede8;
	--gray:#888880;--gray2:#555550;
	--cyan:#00e5ff;--red:#ff3b30;--green:#34c759;--yellow:#ffd60a;
	--fd:'Nunito',sans-serif;--fb:'DM Sans',sans-serif;
	--nav-h:62px;--nav-offset:95px;
	--r:20px;
	--accent:#ff3b30;--accent-rgb:255,59,48;
}
html{scroll-behavior:smooth;}
body{font-family:var(--fb);overflow-x:hidden;background:var(--light);color:#111;}
body::before{
	content:'';position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.026;
	background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size:200px;
}

/* KEYFRAMES */
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(1.4);}}
@keyframes linedrift{0%{opacity:0;width:0;left:0;}25%{opacity:.5;}100%{opacity:.07;width:100%;left:0;}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}

/* STRIPE */
.stripe{display:flex;height:2px;width:100%;}
.stripe span{flex:1;}
.stripe span:nth-child(1){background:var(--cyan);}
.stripe span:nth-child(2){background:var(--red);}
.stripe span:nth-child(3){background:var(--green);}
.stripe span:nth-child(4){background:var(--yellow);}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);}
.reveal.vis{opacity:1;transform:none;}
.rd1{transition-delay:.1s;}
.rd2{transition-delay:.2s;}
.rd3{transition-delay:.3s;}
.rd4{transition-delay:.4s;}

/* EYEBROW */
.eb{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:12px;color:var(--accent);}
.eb::before{content:'';width:20px;height:1px;flex-shrink:0;background:var(--accent);}
.sec.light .eb{color:var(--accent);}
.sec.dark .eb{color:var(--accent);}
.eb-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-in-out infinite;}
.shero-eb{margin-bottom:20px;}

/* BUTTONS */
.btn-acc{
	padding:14px 32px;background:var(--accent);color:#f0ede8;
	border:none;cursor:pointer;font-family:var(--fb);font-weight:700;
	font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-radius:9px;
	text-decoration:none;display:inline-flex;align-items:center;gap:10px;
	transition:opacity .25s,transform .25s;
}
.btn-acc:hover{opacity:.88;transform:translateY(-1px);}
.btn-g{
	font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);
	font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
	background:none;border:1.5px solid rgba(240,237,232,.2);font-family:var(--fb);
	padding:13px 28px;border-radius:8px;transition:all .25s;text-decoration:none;
}
.btn-g:hover{color:var(--w);border-color:var(--w);transform:translateY(-2px);}
.sec.light .btn-g{color:#555;border-color:#bbb;}
.sec.light .btn-g:hover{color:#111;border-color:#111;}
.arr{display:inline-block;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.btn-acc:hover .arr,.btn-g:hover .arr{transform:translateX(5px);}

/* FLOATING CHIP */
.fchip{
	position:absolute;background:rgba(255,255,255,.08);
	backdrop-filter:blur(12px);border:.5px solid rgba(255,255,255,.14);
	border-radius:12px;padding:10px 16px;z-index:3;
}
.fchip-l{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);font-weight:700;margin-bottom:3px;}
.fchip-v{font-family:var(--fd);font-size:15px;font-weight:900;color:var(--w);letter-spacing:-.3px;}

/* BLOBS */
.blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;}

/* LINES */
.lines{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.lines i{position:absolute;height:1px;opacity:0;animation:linedrift 6s ease-out infinite;}
.lines i:nth-child(1){top:22%;background:var(--cyan);animation-delay:.3s;}
.lines i:nth-child(2){top:44%;background:var(--red);animation-delay:.8s;}
.lines i:nth-child(3){top:66%;background:var(--green);animation-delay:1.3s;}
.lines i:nth-child(4){top:80%;background:var(--yellow);animation-delay:1.8s;}

/* OUTLINE ACCENT TEXT */
.ink-out-acc{color:var(--bg);-webkit-text-stroke:2.5px var(--accent);paint-order:stroke fill;}
.sec.light .ink-out-acc{color:var(--light);}

/* -----------------------------------------------
   HERO SECTION
----------------------------------------------- */
.shero{
	min-height:calc(100vh - var(--nav-offset));
	padding:calc(var(--nav-offset) + 60px) 64px 80px;
	background:var(--bg);
	display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
	position:relative;overflow:hidden;
}
.shero-copy{position:relative;z-index:2;}
.shero-vis{position:relative;z-index:2;}
.shero-crumb{
	font-size:10px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--gray2);font-weight:600;margin-bottom:16px;
	display:flex;align-items:center;gap:8px;
}
.shero-crumb a{color:var(--gray2);text-decoration:none;transition:color .2s;}
.shero-crumb a:hover{color:var(--w);}
.shero-crumb span{opacity:.5;}
.shero-h{
	font-family:var(--fd);font-weight:900;
	font-size:clamp(44px,6vw,88px);line-height:.95;letter-spacing:-3px;
	color:var(--w);margin-bottom:22px;
}
.shero-lead{
	font-size:16px;line-height:1.8;color:var(--gray);
	font-weight:300;max-width:520px;margin-bottom:34px;
}
.shero-lead strong{color:var(--w);font-weight:500;}
.shero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:40px;}
.shero-meta{display:flex;gap:28px;flex-wrap:wrap;padding-top:20px;border-top:.5px solid #1c1c1c;}
.shero-meta-n{
	font-family:var(--fd);font-weight:900;font-size:24px;
	letter-spacing:-1px;color:var(--w);line-height:1;margin-bottom:4px;
}
.shero-meta-n sup{font-size:.5em;vertical-align:super;}
.shero-meta-l{font-size:11px;color:var(--gray);font-weight:300;letter-spacing:.04em;}

/* -----------------------------------------------
   SECTIONS
----------------------------------------------- */
.sec{padding:120px 64px;position:relative;overflow:hidden;}
.sec.dark{background:var(--bg);}
.sec.light{background:var(--light);}
.wrap{max-width:1240px;margin:0 auto;position:relative;z-index:1;}
.sec-bgn{
	position:absolute;font-family:var(--fd);font-weight:900;
	font-size:clamp(180px,26vw,360px);line-height:1;letter-spacing:-10px;
	right:-40px;bottom:-60px;pointer-events:none;user-select:none;z-index:0;
}
.sec.dark .sec-bgn{color:rgba(255,255,255,.025);}
.sec.light .sec-bgn{color:rgba(0,0,0,.035);}
.sec-head{margin-bottom:52px;}
.sec-h{
	font-family:var(--fd);font-weight:900;
	font-size:clamp(42px,5.5vw,76px);line-height:.95;letter-spacing:-2.5px;
}
.sec.dark .sec-h{color:var(--w);}
.sec.light .sec-h{color:#111;}
.sec-lead{font-size:15px;line-height:1.8;font-weight:300;max-width:580px;margin-top:16px;}
.sec.dark .sec-lead{color:var(--gray);}
.sec.light .sec-lead{color:#53524c;}

/* -----------------------------------------------
   FEATURES GRID
----------------------------------------------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.feat{border-radius:18px;padding:28px 24px;transition:transform .4s cubic-bezier(.34,1.56,.64,1),border-color .3s;}
.sec.dark .feat{background:var(--bg3);border:.5px solid #1c1c1c;}
.sec.light .feat{background:#fff;border:.5px solid #e3ddd3;}
.feat:hover{transform:translateY(-6px);}
.sec.light .feat:hover{border-color:rgba(var(--accent-rgb),.3);}
.sec.dark .feat:hover{border-color:rgba(var(--accent-rgb),.3);}
.feat-ico{
	width:38px;height:38px;border-radius:10px;
	background:rgba(var(--accent-rgb),.1);
	display:flex;align-items:center;justify-content:center;
	color:var(--accent);margin-bottom:16px;
}
.feat-ico svg{width:18px;height:18px;}
.feat-h{font-family:var(--fd);font-size:16px;font-weight:900;letter-spacing:-.3px;margin-bottom:7px;}
.sec.dark .feat-h{color:var(--w);}
.sec.light .feat-h{color:#111;}
.feat-t{font-size:13.5px;line-height:1.65;font-weight:300;}
.sec.dark .feat-t{color:var(--gray);}
.sec.light .feat-t{color:#53524c;}

/* -----------------------------------------------
   PRICING TIERS
----------------------------------------------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1060px;margin:0 auto;}
.tier{
	background:var(--bg3);border:.5px solid #1c1c1c;border-radius:24px;
	padding:36px 30px;position:relative;overflow:hidden;
	display:flex;flex-direction:column;
}
.tier.featured{
	border-color:rgba(var(--accent-rgb),.35);
	background:linear-gradient(160deg,rgba(var(--accent-rgb),.06),var(--bg3));
}
.tier-badge{
	position:absolute;top:16px;right:16px;background:var(--accent);color:#fff;
	font-size:9px;letter-spacing:.16em;text-transform:uppercase;
	font-weight:700;padding:5px 11px;border-radius:100px;
}
.tier-eb{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray2);font-weight:700;margin-bottom:12px;}
.tier-name{font-family:var(--fd);font-weight:900;font-size:24px;color:var(--w);letter-spacing:-.5px;margin-bottom:8px;}
.tier-cap{font-size:13px;line-height:1.65;color:var(--gray);font-weight:300;margin-bottom:20px;}
.tier-price{font-family:var(--fd);font-weight:900;font-size:36px;color:var(--w);letter-spacing:-1.2px;line-height:1;margin-bottom:4px;}
.tier-price small{font-family:var(--fb);font-size:13px;font-weight:400;color:var(--gray);letter-spacing:0;}
.tier-hours{font-size:12px;color:var(--gray);font-weight:300;margin-bottom:16px;letter-spacing:.04em;}
.tier-hours span{color:var(--accent);}
.tier-div{height:.5px;background:#1c1c1c;margin:16px 0;}
.tier-list{list-style:none;display:flex;flex-direction:column;gap:10px;flex:1;margin-bottom:24px;}
.tier-list li{
	font-size:13px;color:var(--gray);font-weight:300;
	display:flex;align-items:flex-start;gap:9px;line-height:1.55;
}
.tier-list li svg{flex-shrink:0;width:14px;height:14px;color:var(--accent);margin-top:2px;}
.tier-list li.head{
	font-size:9px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--gray2);font-weight:700;margin-bottom:2px;
	display:block;padding:0;
}
.tier-list li.star{color:var(--w);font-weight:500;}
.tier-list li.star svg{color:var(--accent);}
.tier-cta{
	display:block;text-align:center;padding:13px;
	border:1.5px solid rgba(240,237,232,.2);color:var(--w);
	font-family:var(--fb);font-weight:600;font-size:11px;
	letter-spacing:.1em;text-transform:uppercase;border-radius:8px;
	text-decoration:none;transition:all .3s;margin-top:auto;
}
.tier-cta:hover{background:var(--w);color:var(--bg);border-color:var(--w);}
.tier.featured .tier-cta{background:var(--accent);color:#fff;border-color:var(--accent);}
.tier.featured .tier-cta:hover{opacity:.88;}
.tiers-note{
	text-align:center;font-size:13px;color:var(--gray);font-weight:300;
	max-width:640px;margin:28px auto 0;line-height:1.7;
}
.tiers-note strong{color:var(--w);font-weight:500;}

/* -----------------------------------------------
   FINAL CTA
----------------------------------------------- */
.ctaX{background:var(--bg);padding:120px 64px;text-align:center;position:relative;overflow:hidden;}
.ctaX-glow{
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:800px;height:400px;
	background:radial-gradient(ellipse,rgba(var(--accent-rgb),.07),transparent 65%);
	pointer-events:none;
}
.ctaX-h{
	font-family:var(--fd);font-weight:900;
	font-size:clamp(44px,7vw,92px);line-height:.95;letter-spacing:-3px;
	color:var(--w);margin-bottom:22px;position:relative;z-index:1;
}
.ctaX-sub{
	font-size:16px;color:var(--gray);font-weight:300;
	max-width:480px;margin:0 auto 38px;line-height:1.8;position:relative;z-index:1;
}
.ctaX-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;}
.ctaX-note{margin-top:18px;font-size:11px;color:var(--gray2);letter-spacing:.08em;position:relative;z-index:1;}

/* -----------------------------------------------
   PROCESS STEPS
----------------------------------------------- */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.proc{
	background:#fff;border:.5px solid #e3ddd3;border-radius:20px;padding:32px 26px;
	transition:transform .4s cubic-bezier(.34,1.56,.64,1),border-color .3s;
}
.proc:hover{transform:translateY(-6px);border-color:rgba(var(--accent-rgb),.3);}
.proc-n{
	font-family:var(--fd);font-weight:900;font-size:44px;
	color:#fff;-webkit-text-stroke:2px var(--accent);paint-order:stroke fill;
	line-height:.9;letter-spacing:-1.5px;margin-bottom:14px;
}
.proc-tag{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:8px;}
.proc-h{font-family:var(--fd);font-size:17px;font-weight:900;color:#111;letter-spacing:-.3px;margin-bottom:8px;}
.proc-t{font-size:13px;color:#53524c;font-weight:300;line-height:1.65;}

/* -----------------------------------------------
   COMPARISON TABLE
----------------------------------------------- */
.cmp{max-width:820px;margin:0 auto;border:.5px solid #e3ddd3;border-radius:16px;overflow:hidden;}
.cmp-row{display:grid;grid-template-columns:1.7fr 1fr 1fr;align-items:center;}
.cmp-row.head{background:#faf8f4;}
.cmp-row+.cmp-row{border-top:.5px solid #e3ddd3;}
.cmp-c{padding:14px 18px;font-size:13px;}
.cmp-c.feat-label{color:#53524c;font-weight:300;}
.cmp-c.center{text-align:center;}
.cmp-col-h{font-family:var(--fd);font-weight:900;font-size:14px;letter-spacing:-.2px;display:block;padding:16px 0 8px;}
.cmp-col-h.us{color:#111;}
.cmp-col-h.them{color:#888;}
.cmp-us-col{background:rgba(0,229,255,.04);}
.cmp-row.head .cmp-us-col{background:rgba(0,229,255,.08);}
.tick{display:inline-flex;color:var(--accent);}
.tick svg{width:18px;height:18px;}
.cross{display:inline-flex;color:#ccc;}
.cross svg{width:16px;height:16px;}
.cmp-them{font-size:11px;color:#888;font-weight:300;}

/* -----------------------------------------------
   CODE WINDOW
----------------------------------------------- */
.codewin{background:#0f0f0f;border:1px solid #242424;border-radius:16px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5);}
.codewin-bar{padding:13px 17px;border-bottom:.5px solid #242424;display:flex;align-items:center;gap:8px;}
.codewin-bar .d{width:9px;height:9px;border-radius:50%;background:#333;}
.codewin-bar .d:nth-child(1){background:#ff5f56;}
.codewin-bar .d:nth-child(2){background:#ffbd2e;}
.codewin-bar .d:nth-child(3){background:#27c93f;}
.codewin-file{margin-left:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--gray);}
.codewin-dot{
	margin-left:auto;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--green);font-weight:700;display:flex;align-items:center;gap:6px;
}
.codewin-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);}
.codewin-body{height:340px;overflow:hidden;position:relative;}
.codewin-scroll{display:flex;gap:0;height:100%;}
.codewin-gutter{
	padding:16px 10px 16px 16px;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
	font-size:12.5px;color:#3a3a3a;line-height:2;
	min-width:36px;text-align:right;user-select:none;
	border-right:.5px solid #1c1c1c;flex-shrink:0;
}
.codewin-code{flex:1;padding:16px 16px 16px 14px;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:2;}
.cl{display:block;}
.codewin-cursor{display:inline-block;width:2px;height:14px;background:var(--cyan);vertical-align:middle;animation:blink .8s ease-in-out infinite;}

/* -----------------------------------------------
   PORTAL BUTTON
----------------------------------------------- */
.portal-btn{
	display:block;margin-top:14px;text-align:center;padding:11px;
	font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
	background:rgba(255,255,255,.06);border:.5px solid rgba(255,255,255,.12);
	border-radius:8px;color:var(--w);cursor:pointer;
}

/* =====================================================
   RESPONSIVE BREAKPOINTS
===================================================== */
@media(max-width:1200px){
	.shero{padding:calc(var(--nav-offset) + 40px) 40px 60px;}
	.sec{padding:100px 40px;}
	.ctaX{padding:100px 40px;}
}
@media(max-width:1100px){
	.shero{grid-template-columns:1fr;gap:40px;}
	.shero-vis{order:2;}
	.shero-h{font-size:clamp(40px,8vw,72px);}
	.proc-grid{grid-template-columns:1fr 1fr;}
	.feat-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
	.tiers{grid-template-columns:1fr;max-width:480px;}
	.sec{padding:80px 32px;}
	.shero{padding:calc(var(--nav-offset) + 28px) 32px 50px;}
}
@media(max-width:768px){
	.shero{padding:calc(var(--nav-offset) + 20px) 22px 44px;gap:28px;}
	.shero-h{font-size:clamp(36px,10vw,60px);letter-spacing:-2px;}
	.shero-meta{gap:18px;}
	.shero-meta-n{font-size:20px;}
	.shero-lead{font-size:15px;}
	.sec{padding:64px 22px;}
	.ctaX{padding:72px 22px;}
	.ctaX-h{font-size:clamp(36px,10vw,60px);letter-spacing:-2px;}
	.feat-grid{grid-template-columns:1fr;}
	.proc-grid{grid-template-columns:1fr;}
	.tiers{max-width:100%;}
	.cmp-row{grid-template-columns:1.2fr .8fr .8fr;}
	.cmp-c{padding:11px 12px;font-size:12px;}
	.fchip{display:none;}
}
@media(max-width:480px){
	.shero-actions{flex-direction:column;align-items:stretch;}
	.btn-acc,.btn-g{justify-content:center;text-align:center;}
	.ctaX-btns{flex-direction:column;align-items:center;}
	.tiers{padding:0;}
}
/* SPOT: mobile panel order — heading → visual → body */
@media(max-width:1000px){
	.spot-col{display:contents;}
	.spot-top{order:1;}
	.spot-body{order:3;}
}
@media(prefers-reduced-motion:reduce){
	.reveal{transition:opacity .3s;transform:none;}
	*{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}