/* g2u.kz, built on the Atasuai Design System (Figma aL747wQkDgaH7SV0xIqEqA).
   Layout: header (logo · language · theme) → centred hero with the shortener card → your links → pricing → footer.
   Every value below maps to a DS token: Color (Light/Dark), Spacing, Radius, Typography, Motion. Cards are flat with a border; elevation is for overlays only (toast). */
:root{
  /* color/bg */
  --page:#f9fafb; --surface:#ffffff; --inset:#f3f4f6; --hover:#f9fafb; --pressed:#f3f4f6; --disabled-bg:#e5e7eb;
  --brand:#4f89fc; --brand-hover:#2e6fe8; --brand-pressed:#1e54b5; --brand-subtle:#eff4ff;
  --success-subtle:#d6f5dc; --error-subtle:#fee2e2; --warn-subtle:#ffedd5;
  --inverse:#1d2630;
  /* color/text */
  --text:#1d2630; --text-2:#5b6c79; --text-3:#6b7280; --text-disabled:#9ca3af;
  --text-brand:#1e54b5; --text-accent:#2e6fe8; --on-brand:#ffffff;
  --text-success:#0f7a1f; --text-error:#b91c1c; --text-warn:#c2410c;
  --on-inverse:#ffffff; --on-inverse-2:#d1d5db; --toast-action:#729efe;
  /* color/border + icon */
  --border:#e8eaee; --border-strong:#d1d5db; --border-brand:#4f89fc; --border-error:#ef4444;
  --icon:#4b5563; --icon-brand:#4f89fc; --icon-success:#0f7a1f;
  --focus:#2e6fe8; --focus-glow:rgba(46,111,232,.32);
  --logo-ink:#163063;
  /* elevation/medium — overlays only */
  --elev-medium:0 2px 4px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.1);
  /* radius */
  --r-sm:6px; --r-base:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-full:999px;
  /* motion */
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:320ms; --ease:cubic-bezier(.16,1,.3,1);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --page:#1d2630; --surface:#252e3a; --inset:#1d2630; --hover:#374151; --pressed:#4b5563; --disabled-bg:#374151;
  --brand-subtle:#0f2a57; --success-subtle:#0f7a1f; --error-subtle:#b91c1c; --warn-subtle:#c2410c;
  --inverse:#ffffff;
  --text:#f9fafb; --text-2:#d1d5db; --text-3:#9ca3af; --text-disabled:#4b5563;
  --text-brand:#729efe; --text-accent:#729efe;
  --text-success:#d6f5dc; --text-error:#fee2e2; --text-warn:#ffedd5;
  --on-inverse:#1d2630; --on-inverse-2:#4b5563; --toast-action:#1e54b5;
  --border:#374151; --border-strong:#4b5563; --border-brand:#729efe;
  --icon:#9ca3af; --icon-brand:#729efe; --icon-success:#80dc95;
  --focus:#729efe; --focus-glow:rgba(114,158,254,.32);
  --logo-ink:#f9fafb;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --page:#1d2630; --surface:#252e3a; --inset:#1d2630; --hover:#374151; --pressed:#4b5563; --disabled-bg:#374151;
  --brand-subtle:#0f2a57; --success-subtle:#0f7a1f; --error-subtle:#b91c1c; --warn-subtle:#c2410c;
  --inverse:#ffffff;
  --text:#f9fafb; --text-2:#d1d5db; --text-3:#9ca3af; --text-disabled:#4b5563;
  --text-brand:#729efe; --text-accent:#729efe;
  --text-success:#d6f5dc; --text-error:#fee2e2; --text-warn:#ffedd5;
  --on-inverse:#1d2630; --on-inverse-2:#4b5563; --toast-action:#1e54b5;
  --border:#374151; --border-strong:#4b5563; --border-brand:#729efe;
  --icon:#9ca3af; --icon-brand:#729efe; --icon-success:#80dc95;
  --focus:#729efe; --focus-glow:rgba(114,158,254,.32);
  --logo-ink:#f9fafb;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* Body M 14/20 */
body{background:radial-gradient(1100px 440px at 50% 0,var(--brand-subtle),transparent 72%) no-repeat,var(--page);color:var(--text);font-family:var(--font);font-size:14px;line-height:20px;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
a{color:var(--text-accent)}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
svg.i{width:20px;height:20px;flex:none;display:block}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--border)}
.hdr .wrap{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--text);flex:none}
.brand svg.brand-logo{height:28px;width:auto;display:block}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px}
/* Tabs · segmented · sm 32 */
.lang{display:flex;gap:2px;background:var(--inset);border-radius:var(--r-md);padding:2px;flex:none}
.lang button{height:28px;min-width:44px;border:1px solid transparent;background:transparent;padding:0 10px;border-radius:var(--r-base);font-size:14px;line-height:20px;font-weight:500;color:var(--text-2);cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.lang button:hover{color:var(--text)}
.lang button[aria-pressed="true"]{background:var(--surface);color:var(--text);border-color:var(--border)}
/* IconButton · secondary · md 40 */
.theme-btn{width:40px;height:40px;flex:none;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--icon);display:grid;place-items:center;cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.theme-btn:hover{background:var(--hover);border-color:var(--border-strong);color:var(--text)}
.theme-btn svg{width:18px;height:18px}
@media (max-width:640px){.hdr .wrap{height:56px;gap:12px}}

/* Page rhythm: spacing/5xl between sections */
main{padding-block:48px 80px;display:grid;gap:64px}
.hero{display:grid;gap:32px}
.hero-head{display:grid;gap:16px}
.hero-center{justify-items:center;text-align:center;max-width:720px;margin:0 auto;padding-top:16px}
/* Display 40/48 semibold, tracking/display; Heading XL on phones */
h1{font-size:40px;line-height:48px;letter-spacing:-.022em;margin:0;font-weight:600;text-wrap:balance;color:var(--text)}
.hero-center h1 em{font-style:normal;color:var(--text-accent)}
@media (max-width:640px){h1{font-size:32px;line-height:40px;letter-spacing:-.015em}}
/* Heading L 24/32 */
h2{font-size:24px;line-height:32px;letter-spacing:-.012em;margin:0;font-weight:600;text-wrap:balance;color:var(--text)}
h3{font-size:18px;line-height:24px;letter-spacing:-.005em;margin:0;font-weight:600}
/* Body L 16/24 */
.lead{color:var(--text-2);font-size:16px;line-height:24px;margin:0;max-width:56ch}
/* Badge · brand · lg */
.pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pills li{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;height:24px;padding:0 12px 0 10px;border-radius:var(--r-full);background:var(--brand-subtle);color:var(--text-brand);font-size:12px;line-height:16px;font-weight:500}
.pills svg{width:14px;height:14px}

/* Card · flat */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.tool{padding:24px;display:flex;flex-direction:column;gap:16px}
.hero .tool{width:100%;max-width:880px;margin:0 auto}
.row{display:flex;gap:12px}
.field{position:relative;flex:1;min-width:0}
.field .lead-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--text-3);pointer-events:none}
/* Input · control-height/xl 56 for the hero; Body L text */
.input{width:100%;height:56px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);padding:0 16px 0 48px;font-size:16px;line-height:24px;color:var(--text);outline:none;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.input::placeholder{color:var(--text-3)}
.input:hover{border-color:var(--border-strong)}
.input:focus{border-color:var(--border-brand);box-shadow:0 0 0 3px var(--focus-glow)}
.input[aria-invalid="true"]{border-color:var(--border-error)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(239,68,68,.24)}
/* Button: radius md 10, Medium weight; xl 56 · lg 48 · md 42 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;text-decoration:none;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.btn svg{width:18px;height:18px}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-glow)}
.btn-xl{height:56px;padding:0 24px;gap:12px;font-size:18px;line-height:24px}
.btn-xl svg{width:20px;height:20px}
.btn-lg{height:48px;padding:0 20px;gap:12px;font-size:16px;line-height:24px}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--brand-hover)}
.btn-primary:active{background:var(--brand-pressed)}
.btn-primary[disabled]{background:var(--disabled-bg);color:var(--text-disabled);cursor:progress}
.btn-sec{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn-sec:hover{background:var(--hover);border-color:var(--border-strong)}
.btn-sec:active{background:var(--pressed)}
.btn-sec svg{color:var(--icon)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--inset);color:var(--text)}
/* Field helper / error: Body S 12/16 and Body M for the form-level error */
.err{display:flex;gap:8px;align-items:flex-start;color:var(--text-error);font-size:14px;line-height:20px;margin:0}
.err svg{width:16px;height:16px;margin-top:2px}
.hint{color:var(--text-3);font-size:12px;line-height:16px;margin:0}
/* Button · link-color */
.toggle{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--text-accent);font-weight:500;font-size:14px;line-height:20px;cursor:pointer;padding:2px 0;align-self:flex-start;border-radius:var(--r-xs)}
.toggle svg{width:16px;height:16px;transition:transform var(--dur-base) var(--ease)}
.toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease),opacity var(--dur-base) var(--ease);opacity:0}
.collapse.open{grid-template-rows:1fr;opacity:1}
.collapse-in{overflow:hidden;min-height:0;padding:0 4px;margin:0 -4px}
.tool > .collapse{margin-top:-16px}
.collapse-in > *{padding-top:16px}
.alias{display:grid;gap:8px;padding-bottom:4px}
@keyframes reveal{from{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}
.collapse.enter{animation:reveal var(--dur-slow) var(--ease)}
/* Label L 14/20 */
.alias label{font-size:14px;line-height:20px;font-weight:500;color:var(--text)}
/* Input · lg 48 with a prefix */
.alias-box{display:flex;align-items:stretch;height:48px;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;max-width:520px;background:var(--surface);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.alias-box:hover{border-color:var(--border-strong)}
.alias-box:focus-within{border-color:var(--border-brand);box-shadow:0 0 0 3px var(--focus-glow)}
.alias-box .pre{display:flex;align-items:center;padding:0 12px 0 16px;color:var(--text-3);background:var(--inset);font-size:16px;line-height:24px;border-right:1px solid var(--border);white-space:nowrap}
.alias-box input{border:0;outline:none;flex:1;min-width:0;padding:0 16px;background:transparent;font-size:16px;line-height:24px}
.alias-box input::placeholder{color:var(--text-3)}
.ok{color:var(--text-success);font-size:12px;line-height:16px;margin:0;display:flex;gap:4px;align-items:center}
.ok svg{width:14px;height:14px}
.bad{color:var(--text-error)}
@media (max-width:640px){
  .row.stack{flex-direction:column}
  .row.stack .btn{width:100%}
  /* Phone: the tool card runs edge to edge */
  .hero .tool{max-width:none;width:auto;border-radius:0;border-left:0;border-right:0;
    margin-left:calc(-1 * max(16px, env(safe-area-inset-left, 0px)));margin-right:calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    padding:20px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px))}
}

/* Result */
.result{border-top:1px solid var(--border);padding-top:20px;display:grid;gap:16px}
@keyframes rise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.toast,.collapse.enter{animation:none}*{transition:none!important}}
.res-top{display:flex;align-items:center;gap:8px;color:var(--text-success);font-weight:500;font-size:14px;line-height:20px}
.res-top svg{width:16px;height:16px}
.res-main{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.short{flex:1;min-width:0;display:flex;align-items:center;background:var(--brand-subtle);border-radius:var(--r-md);padding:12px 16px;min-height:56px}
/* Heading M 20/28 */
.short a{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--text-brand);overflow-wrap:anywhere}
.short a:hover{text-decoration:underline}
.long{font-size:12px;line-height:16px;color:var(--text-3);margin:0;overflow-wrap:anywhere}
.long b{font-weight:500;color:var(--text-2)}
.res-actions{display:flex;flex-wrap:wrap;gap:8px}
.res-actions .spacer{flex:1}
@media (max-width:640px){.res-main .btn{width:100%}.short a{font-size:18px;line-height:24px}.res-actions .btn-sec{flex:1 1 calc(50% - 4px)}.res-actions .spacer{display:none}.res-actions .btn-ghost{flex:1 1 100%}}

/* Section head */
.sec-head{display:grid;gap:4px;margin-bottom:16px}
.sec-head p{margin:0;color:var(--text-3);font-size:14px;line-height:20px}

/* Your links · ListItem rows inside a flat card */
.links{overflow:hidden}
.link-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px 12px 20px;border-top:1px solid var(--border)}
.link-row:first-child{border-top:0}
.link-row:hover{background:var(--hover)}
.fav{width:40px;height:40px;border-radius:var(--r-md);background:var(--inset);display:grid;place-items:center;font-weight:500;color:var(--text-2);text-transform:uppercase;font-size:14px}
.lr-text{min-width:0;display:grid;gap:2px}
.lr-short{display:flex;align-items:center;gap:8px;min-width:0}
.lr-short a{font-size:14px;line-height:20px;font-weight:500;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-short a:hover{color:var(--text-accent)}
.badge{height:20px;display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--r-full);background:var(--warn-subtle);color:var(--text-warn);font-size:12px;line-height:16px;font-weight:500;flex:none}
.lr-long{font-size:12px;line-height:16px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-meta{display:flex;align-items:center;gap:8px}
.lr-act{display:flex;gap:4px}
/* IconButton · tertiary · md 40 */
.icon-btn{width:40px;height:40px;border:0;background:transparent;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--icon);cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.icon-btn:hover{background:var(--inset);color:var(--text)}
.icon-btn.del:hover{color:var(--text-error);background:var(--error-subtle)}
.icon-btn svg{width:18px;height:18px}
/* EmptyState */
.empty{padding:40px 24px;text-align:center;color:var(--text-3);display:grid;gap:12px;justify-items:center}
.empty .empty-ic{width:48px;height:48px;border-radius:var(--r-full);background:var(--brand-subtle);color:var(--icon-brand);display:grid;place-items:center}
.empty .empty-ic svg{width:24px;height:24px}
@media (max-width:640px){
  .link-row{grid-template-columns:40px minmax(0,1fr);padding:12px 16px;gap:4px 12px}
  .lr-meta{grid-column:2;margin-left:-10px}
}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:720px){.plans{grid-template-columns:1fr}}
.plan{padding:24px;display:flex;flex-direction:column;gap:16px}
.plan.pro{border-color:var(--border-brand)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Heading S 18/24 */
.plan-name{display:flex;align-items:center;gap:8px;font-weight:600;font-size:18px;line-height:24px;letter-spacing:-.005em;color:var(--text)}
.plan-name svg{width:20px;height:20px;color:var(--icon-brand)}
/* Badge · brand · md */
.plan-badge{height:20px;display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--r-full);background:var(--brand-subtle);color:var(--text-brand);font-size:12px;line-height:16px;font-weight:500}
/* Heading XL 32/40 */
.plan-price{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-.015em;color:var(--text)}
.plan-price small{font-size:14px;line-height:20px;font-weight:400;color:var(--text-3);letter-spacing:0;margin-left:8px}
.plan p{margin:0;color:var(--text-2)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;flex:1;align-content:start}
.plan li{display:flex;gap:8px;align-items:flex-start;color:var(--text)}
.plan li svg{width:20px;height:20px;color:var(--icon-success)}
.plan .btn{align-self:stretch}

/* Footer · Body S */
footer{border-top:1px solid var(--border);background:var(--surface)}
footer .wrap{display:flex;gap:16px 32px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-block:24px;font-size:12px;line-height:16px;color:var(--text-3)}
footer svg.brand-logo{height:24px;width:auto}
footer p{margin:0;max-width:60ch}

/* Toast · inverse, elevation/medium */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--inverse);color:var(--on-inverse);padding:12px;border-radius:var(--r-md);font-size:14px;line-height:20px;font-weight:600;display:flex;gap:12px;align-items:center;z-index:50;box-shadow:var(--elev-medium);animation:rise var(--dur-base) var(--ease);width:max-content;max-width:calc(100vw - 32px)}
.toast svg{width:18px;height:18px}
.toast-act{border:0;background:transparent;color:var(--toast-action);font-weight:600;font-size:14px;line-height:20px;padding:0 4px;cursor:pointer;border-radius:var(--r-xs)}
.toast-act:hover{text-decoration:underline}

/* ===== Added for the live page (same DS tokens): the report view, the captcha slot, the footer links ===== */
.page.center{display:grid;gap:24px;max-width:640px;margin:0 auto;width:100%}
.sub-head{justify-items:center;text-align:center}
.sub-ic{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:var(--r-full);background:var(--brand-subtle);color:var(--icon-brand)}
.sub-ic .i{width:24px;height:24px}
.panel{padding:24px;display:grid;gap:20px}
.lbl{display:block;font-weight:500;margin-bottom:6px;color:var(--text)}
.input.plain{padding-left:16px;height:48px}
textarea.input{height:auto;min-height:96px;padding:12px 16px;resize:vertical;font-family:inherit}
fieldset{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
legend{font-weight:500;margin-bottom:6px;padding:0;color:var(--text)}
.radios{display:grid;gap:8px}
.radio{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;background:var(--surface)}
.radio:has(input:checked){border-color:var(--border-brand);background:var(--brand-subtle)}
.radio input{accent-color:var(--brand);margin:0}
.btn-sm{height:36px;padding:0 12px}
.success{display:grid;gap:12px;justify-items:center;text-align:center;padding:16px 0}
.success p{margin:0;color:var(--text-2);max-width:48ch}
.big-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-full);background:var(--success-subtle);color:var(--icon-success)}
.big-ic .i{width:28px;height:28px}
.err.mt{margin-top:6px}
.captcha-slot{display:flex;justify-content:center;padding-bottom:24px}
.captcha-slot:empty{display:none}
.foot-text{display:grid;gap:4px}
.foot-link{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.foot-link:hover{color:var(--text)}