@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#070b14;--panel:#0d1422;--text:#f1f5ff;--muted:#9ba8bd;--blue:#55aaff;--cyan:#8be8ff;--line:rgba(164,190,230,.14)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 75% 12%,rgba(26,105,210,.12),transparent 34%),radial-gradient(ellipse at 8% 55%,rgba(25,74,150,.08),transparent 38%);z-index:-1}.noise{position:fixed;inset:0;opacity:.035;pointer-events:none;z-index:5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}.nav{height:82px;display:flex;align-items:center;justify-content:space-between;max-width:1240px;padding:0 34px;margin:auto;border-bottom:1px solid var(--line);position:relative;z-index:10}.brand{display:flex;align-items:center;gap:7px;color:white;text-decoration:none;font-weight:800;letter-spacing:.07em;font-size:13px}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--blue);border-radius:9px;color:var(--cyan);font-size:17px;margin-right:5px}.blue{color:var(--blue)}nav{display:flex;align-items:center;gap:36px}nav a,.text-link,footer>a{font-size:12px;color:#b9c5d8;text-decoration:none;transition:.2s}nav a:hover,.text-link:hover,footer>a:hover{color:white}.nav-cta{border:1px solid var(--line);padding:12px 16px;border-radius:6px;color:white}nav span{color:var(--blue);margin-left:9px}.menu{display:none;background:none;border:0;color:white;font-size:22px}.hero{max-width:1240px;margin:auto;min-height:650px;padding:95px 34px 70px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;position:relative}.eyebrow{font:10px 'DM Mono',monospace;letter-spacing:.18em;color:#90a4c0}.eyebrow i,.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#58e5b0;box-shadow:0 0 14px #58e5b0;margin-right:9px}.hero h1{font-size:clamp(50px,7vw,88px);letter-spacing:-.075em;line-height:.99;margin:28px 0 25px;font-weight:700}.gradient{background:linear-gradient(100deg,#f5f8ff 5%,#76baff 48%,#65e5ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.intro{max-width:490px;color:var(--muted);font-size:14px;line-height:1.9}.actions{display:flex;align-items:center;gap:28px;margin-top:32px}.button{display:inline-flex;align-items:center;gap:24px;padding:16px 19px;border-radius:5px;text-decoration:none;font-size:12px;font-weight:700}.primary{background:linear-gradient(110deg,#287be0,#4eb7ff);color:#04101f;box-shadow:0 8px 35px #1e7ad52b}.button span{font-size:17px}.text-link span{color:var(--blue);margin-left:8px}.availability{margin-top:45px;color:#8b9bb2;font:9px 'DM Mono',monospace;letter-spacing:.1em}.availability .pulse{width:6px;height:6px}.hero-art{height:460px;position:relative;display:grid;place-items:center;perspective:900px}.orb{width:270px;height:270px;border-radius:43% 57% 62% 38%/43% 40% 60% 57%;background:radial-gradient(circle at 28% 22%,#b4efff 0,#5ebdff 8%,#1871d8 36%,#0c2d72 69%,#07142f 100%);box-shadow:inset -25px -25px 55px #030918,inset 12px 12px 28px #a0e5ff75,0 0 85px #1c81ed50;transform:rotate(-25deg);animation:float 7s ease-in-out infinite;position:relative}.orb:after{content:"";position:absolute;inset:13%;border:1px solid #a9e7ff52;border-radius:50%;transform:rotateX(65deg) rotateZ(30deg)}.orb-core{position:absolute;inset:31%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#c7f5ff,#328be9 35%,#061a44 80%);filter:blur(1px);box-shadow:0 0 40px #69caff}.orbit{position:absolute;width:390px;height:150px;border:1px solid #55aaff48;border-radius:50%;transform:rotate(-31deg)}.orbit-two{width:330px;height:430px;transform:rotate(52deg);border-color:#75dfff27}.float-card{position:absolute;background:#101e32c9;border:1px solid #8bcaff38;backdrop-filter:blur(12px);box-shadow:0 15px 40px #0005;border-radius:10px;padding:13px 16px;color:#8bdcff}.float-card small{display:block;font:8px 'DM Mono',monospace;letter-spacing:.12em;color:#8ea7c4;margin-top:5px}.card-a{top:80px;left:5%;font-size:23px;transform:rotate(-9deg)}.card-b{right:0;bottom:85px;transform:rotate(8deg)}.card-b span{font-size:30px;font-weight:800}.art-caption{position:absolute;bottom:25px;right:7%;font:9px 'DM Mono';letter-spacing:.2em;color:#627b9c}.scroll-note{position:absolute;bottom:23px;left:34px;font:9px 'DM Mono';letter-spacing:.16em;color:#71849f}.scroll-note span{color:var(--blue);margin-left:12px}.section{max-width:1240px;margin:auto;padding:110px 34px}.work{border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:42px}.section h2,.contact h2{font-size:clamp(38px,5vw,60px);letter-spacing:-.065em;line-height:1.05;margin:15px 0 0}.section-note{max-width:260px;color:var(--muted);font-size:12px;line-height:1.8}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}.project-wide{grid-column:span 2}.project-visual{height:280px;border:1px solid var(--line);border-radius:10px;position:relative;overflow:hidden;display:grid;place-items:center}.project-wide .project-visual{height:360px}.visual-one{background:radial-gradient(ellipse at 50% 85%,#174b8a,#0b1b35 54%,#0a1120)}.window{width:65%;height:72%;border:1px solid #8acaff4d;border-radius:8px;background:#081426d9;box-shadow:0 20px 70px #0008;transform:perspective(700px) rotateX(4deg) rotateY(-8deg);overflow:hidden}.window-top{height:26px;border-bottom:1px solid #ffffff1a;display:flex;align-items:center;padding:0 10px;gap:5px}.window-top b{width:5px;height:5px;border-radius:50%;background:#59aaff}.window-top span{margin-left:auto;color:#7189a6;font:7px 'DM Mono'}.window-body{padding:25px 32px}.mini-label{font:8px 'DM Mono';letter-spacing:.15em;color:#75caff}.window-body strong{display:block;font-size:clamp(24px,4vw,45px);line-height:1.05;letter-spacing:-.06em;margin:13px 0}.mini-pill{font-size:8px;background:#287be0;color:white;border-radius:20px;padding:8px 12px;display:inline-block}.visual-index{position:absolute;left:18px;top:17px;font:9px 'DM Mono';letter-spacing:.12em;color:#a4bad5}.visual-two{background:radial-gradient(circle at 50% 48%,#203f6d,#0d172a 65%)}.shape-cube{width:125px;height:125px;position:absolute;transform:rotate(32deg) skew(-8deg);background:linear-gradient(135deg,#9de8ff,#2c8bfa 40%,#102f71 75%);box-shadow:inset -20px -10px 25px #04112b,0 0 65px #368cfb88;border-radius:17px}.shape-cube:before{content:"";position:absolute;inset:12px;border:1px solid #c4f4ff9c;border-radius:12px}.visual-word{position:absolute;bottom:18px;left:22px;font-size:23px;line-height:.94;font-weight:800;letter-spacing:-.06em;color:#eaf5ff}.visual-three{background:radial-gradient(circle at 75% 25%,#2b5790,#10182b 60%)}.poster-type{font-size:clamp(27px,4vw,48px);line-height:.94;font-weight:800;letter-spacing:-.07em;z-index:1}.poster-type em{font-style:normal;color:#6dbdff}.poster-ring{position:absolute;width:210px;height:210px;border:25px solid #68bfff66;border-radius:50%;right:9%;top:14%;filter:drop-shadow(0 0 30px #2987df7a)}.project-meta{display:flex;justify-content:space-between;align-items:center;padding:17px 2px}.project-meta h3{font-size:14px;margin:0 0 6px}.project-meta p,.demo-note{font-size:10px;color:#8293ac;margin:0}.arrow{color:var(--blue);font-size:20px}.demo-note{margin-top:13px}.about{display:grid;grid-template-columns:1fr 1fr;gap:95px;align-items:center;border-top:1px solid var(--line)}.about-visual{display:grid;place-items:center;min-height:390px}.about-frame{width:80%;height:340px;border:1px solid #5baaff44;border-radius:12px;background:linear-gradient(145deg,#112b4a,#0a1425 65%);position:relative;overflow:hidden;display:flex;align-items:end;padding:25px;box-shadow:0 25px 80px #0004}.about-frame:before{content:"";position:absolute;inset:15px;border:1px solid #8ad5ff22;border-radius:8px}.about-sphere{position:absolute;width:240px;height:240px;top:25px;left:50%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 30% 25%,#c4f5ff,#3a9bf2 25%,#10417e 65%,#07162d);box-shadow:inset -20px -25px 45px #020a1b,0 0 55px #278fe65a}.about-frame span{font-size:26px;line-height:.95;font-weight:800;letter-spacing:-.06em;z-index:1}.about-frame small{margin-left:auto;z-index:1;font:8px 'DM Mono';color:#a0b6d1}.about-copy p:not(.eyebrow){font-size:12px;line-height:2;color:var(--muted);max-width:490px}.about-copy .text-link{display:inline-block;margin-top:18px}.skills{border-top:1px solid var(--line)}.skill-list{border-top:1px solid var(--line);margin-top:35px}.skill-list>div{display:grid;grid-template-columns:55px 1.1fr 1fr 20px;align-items:center;padding:23px 5px;border-bottom:1px solid var(--line);gap:10px}.skill-list span{font:10px 'DM Mono';color:var(--blue)}.skill-list h3{font-size:15px;margin:0}.skill-list p{font-size:10px;color:#8798b0}.skill-list b{color:var(--blue)}.contact{text-align:center;border-top:1px solid var(--line);padding-top:125px;padding-bottom:125px}.contact .eyebrow{margin-bottom:22px}.contact h2{font-size:clamp(55px,8vw,92px)}.contact>p:not(.eyebrow){font-size:12px;color:var(--muted);margin:25px 0}.contact .button{margin:12px auto 20px}.contact small{display:block;color:#60738e;font-size:9px}footer{border-top:1px solid var(--line);max-width:1172px;margin:auto;padding:25px 0;display:flex;align-items:center;justify-content:space-between}footer span{font:9px 'DM Mono';color:#73849d}footer>a{font-size:10px}@keyframes float{0%,100%{transform:translateY(0) rotate(-25deg)}50%{transform:translateY(-17px) rotate(-17deg)}}@media(max-width:760px){.nav{height:70px;padding:0 20px}.menu{display:block}nav{display:none;position:absolute;top:69px;left:0;right:0;padding:22px;background:#0b1321;border-bottom:1px solid var(--line);flex-direction:column;gap:22px}nav.open{display:flex}.hero{padding:70px 22px 65px;grid-template-columns:1fr;min-height:auto}.hero h1{font-size:clamp(52px,13vw,78px)}.hero-art{height:340px;margin-top:25px}.orb{width:205px;height:205px}.orbit{width:300px;height:120px}.orbit-two{height:320px;width:240px}.card-a{left:4%;top:45px}.card-b{right:4%;bottom:42px}.scroll-note{left:22px;bottom:20px}.section{padding:78px 22px}.section-head{display:block}.section-note{margin-top:18px}.project-grid{grid-template-columns:1fr;gap:20px}.project-wide{grid-column:auto}.project-wide .project-visual{height:270px}.project-visual{height:250px}.window{width:82%}.window-body{padding:20px}.about{grid-template-columns:1fr;gap:30px}.about-visual{min-height:310px}.about-frame{height:290px;width:88%}.about-sphere{width:195px;height:195px}.skill-list>div{grid-template-columns:30px 1fr 18px}.skill-list p{grid-column:2;grid-row:2;margin:5px 0 0}.skill-list b{grid-column:3;grid-row:1/3}footer{margin:0 22px;gap:15px;flex-wrap:wrap}footer span{order:3;width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Sammy Studio contact form */
.contact-form {
  width: min(100%, 560px);
  margin: 34px auto 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  text-align: left;
}

.contact-form label {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}

.contact-form input:not([type="hidden"]),
.contact-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: 13px Manrope, system-ui, sans-serif;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #71829b;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #55aaff1c;
}

.contact-form .button {
  align-self: flex-start;
  margin: 12px 0 0;
  border: 0;
  cursor: pointer;
  font: 700 12px Manrope, system-ui, sans-serif;
}

.contact-email {
  margin-top: 32px !important;
  color: var(--muted);
  font-size: 12px;
}

.contact-email a {
  color: var(--blue);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .contact-form {
    width: 100%;
    margin-top: 28px;
  }

  .contact-form .button {
    width: 100%;
    justify-content: center;
  }
}
/* SAMMY STUDIO — FINAL POLISH */

/* Smoother interactions */
a, button, .project, .project-visual {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Premium button interaction */
.button.primary {
  position: relative;
  overflow: hidden;
}

.button.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(55, 153, 255, 0.28);
}

/* Project card interaction */
.project:hover .project-visual {
  border-color: rgba(85, 170, 255, 0.5);
  box-shadow: 0 15px 45px rgba(20, 100, 200, 0.12);
}

.project:hover .arrow {
  transform: translate(4px, -4px);
}

/* Navigation refinement */
nav a {
  position: relative;
}

nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--blue);
  transition: width 0.3s ease;
}

nav a:not(.nav-cta):hover::after {
  width: 100%;
}

/* Better keyboard accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

/* Cleaner form submission feedback */
.form-success {
  padding: 15px 18px;
  margin-top: 20px;
  border: 1px solid rgba(88, 229, 176, 0.3);
  border-radius: 8px;
  background: rgba(88, 229, 176, 0.07);
  color: #8be8bb;
  line-height: 1.7;
}

/* Improve mobile touch interactions */
@media (max-width: 760px) {
  .button,
  .nav-cta {
    min-height: 48px;
  }

  .project:hover .project-visual {
    transform: none;
  }

  .contact {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
/* =========================================================
   FEATURED PROJECT — SAMMY STUDIO
   Premium browser showcase
   ========================================================= */

.project-wide .visual-one {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(120, 190, 255, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 72% 42%, rgba(40, 150, 255, 0.24), transparent 34%),
    linear-gradient(145deg, #07111f 0%, #0b1d35 48%, #050a13 100%);
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateZ(0);
  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}

/* Premium glow */
.project-wide .visual-one::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  top: -160px;
  border-radius: 50%;
  background: rgba(55, 160, 255, 0.16);
  filter: blur(70px);
  pointer-events: none;
}

/* Subtle light sweep */
.project-wide .visual-one::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 25%,
    rgba(255, 255, 255, 0.045) 48%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.9s ease;
  pointer-events: none;
}

.project-wide:hover .visual-one {
  transform: translateY(-6px);
  border-color: rgba(100, 190, 255, 0.42);
  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.55),
    0 0 45px rgba(40, 145, 255, 0.12);
}

.project-wide:hover .visual-one::after {
  transform: translateX(100%);
}

/* Browser frame */
.project-wide .browser-preview {
  position: absolute;
  inset: 34px 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: #08111e;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
  transform: perspective(1200px) rotateX(2deg);
}

/* Browser top bar */
.project-wide .browser-preview .browser-bar,
.project-wide .browser-preview .browser-top {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

/* Browser dots */
.project-wide .browser-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.project-wide .browser-dot:first-child {
  background: #ff6b6b;
}

.project-wide .browser-dot:nth-child(2) {
  background: #ffd166;
}

.project-wide .browser-dot:nth-child(3) {
  background: #55d98b;
}

/* Browser address */
.project-wide .browser-url {
  margin-left: 10px;
  color: rgba(220, 235, 255, 0.42);
  font-size: 9px;
  letter-spacing: 0.08em;
}

/* Website preview */
.project-wide .browser-content {
  position: relative;
  height: calc(100% - 38px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 45%, rgba(48, 157, 255, 0.28), transparent 25%),
    linear-gradient(135deg, #07111f, #0a1b31 55%, #07101c);
}

/* Featured label */
.project-wide .preview-label {
  display: block;
  margin-bottom: 18px;
  color: rgba(150, 205, 255, 0.58);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Main preview heading */
.project-wide .browser-content strong {
  position: relative;
  z-index: 2;
  max-width: 440px;
  font-size: clamp(28px, 5vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.project-wide .browser-content strong span {
  color: var(--blue);
}

/* Orb inside website preview */
.project-wide .preview-orb {
  position: absolute;
  width: 180px;
  height: 180px;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #b8e6ff 0 5%, #4aaeff 17%, #086bd5 48%, #041a39 72%);
  box-shadow:
    0 0 35px rgba(45, 155, 255, 0.42),
    0 0 90px rgba(45, 155, 255, 0.18);
  opacity: 0.9;
}

.project-wide .preview-orb::before,
.project-wide .preview-orb::after {
  content: "";
  position: absolute;
  inset: -25px;
  border: 1px solid rgba(100, 190, 255, 0.22);
  border-radius: 50%;
  transform: rotate(25deg) scaleY(0.38);
}

.project-wide .preview-orb::after {
  transform: rotate(-35deg) scaleY(0.38);
}

/* Small project information */
.project-wide .preview-line {
  width: 100px;
  height: 1px;
  margin: 25px 0 10px;
  background: rgba(120, 190, 255, 0.35);
}

.project-wide .browser-content small {
  color: rgba(220, 235, 255, 0.45);
  letter-spacing: 0.12em;
}

/* Featured project metadata */
.project-wide .project-meta {
  padding-top: 18px;
}

.project-wide .project-type {
  color: rgba(100, 190, 255, 0.65);
  font-size: 9px;
  letter-spacing: 0.16em;
}

.project-wide .project-meta h3 {
  margin-top: 7px;
  font-size: 22px;
}

.project-wide .project-meta p {
  color: rgba(220, 230, 245, 0.52);
}

/* Mobile */
@media (max-width: 760px) {
  .project-wide .visual-one {
    min-height: 300px;
    border-radius: 14px;
  }

  .project-wide .browser-preview {
    inset: 22px 18px;
  }

  .project-wide .browser-content {
    padding: 24px;
  }

  .project-wide .preview-orb {
    width: 115px;
    height: 115px;
    right: 7%;
  }

  .project-wide .browser-content strong {
    max-width: 230px;
  }
}
/* =================================
   COMIC FORGE — PREMIUM COMIC DESIGN
================================= */

.comic-story-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 30px;
  min-height: 420px;
  border: 1px solid rgba(90, 155, 255, 0.35);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(25, 91, 190, 0.2), transparent 45%),
    linear-gradient(135deg, #101827, #070b14 70%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.05),
    0 20px 60px rgba(0, 0, 0, 0.25);
}

.comic-story-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.12;
  background-image: radial-gradient(#8dbaff 0.7px, transparent 0.7px);
  background-size: 12px 12px;
  pointer-events: none;
}

.story-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(160, 190, 255, 0.18);
}

.story-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.story-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid rgba(100, 170, 255, 0.65);
  border-radius: 10px;
  background: linear-gradient(145deg, #173d78, #081324);
  box-shadow: 0 0 24px rgba(40, 120, 255, 0.18);
}

.story-mark span {
  grid-area: 1 / 1;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background: #8ec8ff;
  transform: rotate(-35deg);
}

.story-mark span:nth-child(2) {
  transform: rotate(35deg);
}

.story-mark span:nth-child(3) {
  width: 14px;
  transform: rotate(90deg);
}

.story-brand strong {
  display: block;
  color: #f2f6ff;
  font-size: 14px;
  letter-spacing: 0.12em;
}

.story-brand small,
.story-number {
  color: #8ba8d0;
  font-size: 9px;
  letter-spacing: 0.16em;
}

.story-main {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 30px;
  padding: 35px 0;
}

.story-kicker {
  color: #78baff;
  font-size: 9px;
  letter-spacing: 0.2em;
}

.story-copy h3 {
  margin: 14px 0;
  color: #f5f8ff;
  font-size: clamp(25px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.story-copy h3 span {
  color: #73baff;
}

.story-copy p {
  max-width: 340px;
  color: #a2b1c8;
  font-size: 12px;
  line-height: 1.8;
}

.story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.story-meta span {
  padding: 7px 9px;
  border: 1px solid rgba(140, 180, 255, 0.2);
  border-radius: 5px;
  color: #b8cce9;
  font-size: 8px;
  letter-spacing: 0.08em;
}

.story-panel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid rgba(120, 175, 255, 0.3);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(38, 112, 230, 0.3), transparent 60%),
    linear-gradient(145deg, #14243b, #080e19);
}

.panel-corner {
  position: absolute;
  top: 14px;
  left: 14px;
  color: #8bbdff;
  font-size: 9px;
  letter-spacing: 0.15em;
}

.panel-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(111, 177, 255, 0.3);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9bdcff, #2477ed 35%, #07142d 72%);
  box-shadow:
    0 0 35px rgba(38, 125, 255, 0.35),
    inset -12px -15px 28px rgba(0, 0, 0, 0.4);
}

.panel-spark {
  position: absolute;
  top: 20%;
  right: 20%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e5f5ff;
  box-shadow: 0 0 20px 7px rgba(105, 185, 255, 0.5);
}

.panel-frame {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(150, 200, 255, 0.2);
  border-radius: 50%;
  transform: rotate(-25deg) scaleX(1.3);
}

.panel-caption {
  position: absolute;
  bottom: 14px;
  left: 14px;
  color: #c2d8f5;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.story-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(160, 190, 255, 0.18);
  color: #8199bb;
  font-size: 9px;
  letter-spacing: 0.1em;
}

@media (max-width: 760px) {
  .comic-story-frame {
    padding: 20px;
    min-height: auto;
  }

  .story-main {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 26px 0;
  }

  .story-panel {
    min-height: 200px;
  }

  .story-footer {
    flex-direction: column;
  }
}